vue监听字符串长度_Vue 的 computed 和 watch 的区别

computer 计算属性

通过计算得出的属性就是计算属性

计算属性可以是一个函数或者是一个getter和setter组成的对象

看看一个展示名字的实例：

需求一：展示名字

// 引用完整版 Vue，方便讲解import Vue from "vue/dist/vue.js";

new Vue({

data: {

firstName: 'Jacky',

lastName: 'Lee'

},

computed: {

fullName() {

return this.firstName + ' ' + this.lastName

}

},

template: `

{{fullName}}`,

methods: {}

}).$mount("#app");

fullName通过first.Name + lastName 计算得出，fullName使用时不需要加括号，可以直接作为属性使用，展示再页面中

需求二：可以改名字

// 引用完整版 Vue，方便讲解import Vue from "vue/dist/vue.js";

new Vue({

data: {

firstName: 'Jacky',

lastName: 'Lee'

},

computed: {

fullName: {

get(){

return this.firstName + ' ' + this.lastName

},

set(val){

const names = val.split(' ');

this.firstName = names[0];

this.lastName = names[1];

}

}

},

template: `

{{fullName}} 改名字`,

methods: {

change() {

this.fullName = "Candy Wang"

console.log('名字已更改') // 重复点击‘改名字’只打印一次？ }

}

}).$mount("#app");

通过setter和getter使得计算属性可修改，点击‘改名字’时，计算结果发生变化，重新运行计算，进行页面更新。计算属性的结果会被缓存，计算属性只有在它的相关依赖发生改变时才会重新计算。所以再次点击‘改名字’由于计算结果不变，不会重新运行计算。

watch 监听/侦察

当数据变化时执行一个函数

watch属性可以是字符串、函数、对象、数组

拥有deep，immediate两属性

watch的监听方式

请看下面的例子：

// 引用完整版 Vue，方便讲解import Vue from "vue/dist/vue.js";

new Vue({

data: {

n: 0,

obj: {

a: "a"

}

},

template: `

n+1 obj.a + 'hi' obj = 新对象`,

watch: {

n() {

console.log("n 变了");

},

obj() {

console.log("obj 变了");

},

"obj.a": function() {

console.log("obj.a 变了");

}

}

}).$mount("#app");

点击n+1 ：打印出“n 变了”

点击obj.a + 'hi' : 打印出“obj.a 变了”，不打印"obj 变了"

不点击obj.a + 'hi' , 点击obj = 新对象 : 打印出"obj 变了"，不打印"obj 变了"

说明watch的监听方式是：简单数据类型看值，复杂数据类型(对象)看地址

抬个杠，那我想通过监听obj也能obj.a变化可以吗？

答：可以，使用deep

deep属性

watch: {

n() {

console.log("n 变了")

},

obj() {

console.log("obj 变了")

deep: ture // 可以监听到obj对象的所有内部属性

},

"obj.a": function() {

console.log("obj.a 变了")

}

}

点击obj.a + 'hi' : 打印出“obj.a 变了”和 "obj 变了"

当deep：true 会监听到obj对象的所有内部属性，默认值为false

immediate属性

请看这个例子

// 引用完整版 Vue，方便讲解import Vue from "vue/dist/vue.js";

new Vue({

data: {

firstName: 'Jacky',

lastName: 'Lee',

fullName: ''

},

watch: {

firstName: {

handler: 'change'

}

},

template: `

{{fullName}} 改名字`,

methods: {

change() {

this.fullName = this.firstName + ' ' + this.lastName

}

}

}).$mount("#app");

通过fullName属性展示 firstName + lastName 的计算值

运行上面代码，页面啥也没有

然后点击“改名字”，页面显示 John Lee

啊？怎么回事Jacky Lee怎么不显示？

答：因为watch不会监听第一次变化

改造一下

watch: {

firstName: {

handler: 'change',

immediate： ture

}

}

初始页面展示 Jacky Lee

当 immediate：true 时，回调函数会在监听开始后立刻执行，可以监听到到第一次变化。

总结：

computed是用来计算一个值的，使用时不需要加括号，可以直接当属性使用。computed拥有依赖缓存特性，如果依赖值不变，computed不会重新计算

watch是用来监听的，有两个选项，immediate 和 deep，当immediate: true时，表示会在第一次运行是执行这个函数，当 deep：true时，如果监听一个对象，会同时监听其内部属性。watch没有依赖缓存特性。

如果觉得《vue监听字符串长度_Vue 的 computed 和 watch 的区别》对你有帮助，请点赞、收藏，并留下你的观点哦！