计算属性computed和数据监听watch
1.计算属性computed
computed计算属性：只能对最终结果进行运算功能，只计算一次，具有缓存功能，能实现计算属性与普通属性之间的双向绑定。
computed的作用:
1.减少模板中的计算逻辑
2.能够进行数据缓存
3.响应式数据依赖固定的数据类型
2.数据监听watch
3. computed和watch的区别
computed和watch的区别
watch具有computed的一切功能，computed可以实现的watch都可以
<body>
<div id="app">
<input type="text" v-model="text1">
+
<input type="text" v-model="text2">
=
<input type="text" v-model="text">
<div v-for="(item,index) in aa" :key="index"><input type="text" v-model="aa[index]"></div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
text1: '',
text2: '',
aa: [1, 2, 3]
}
},
computed: {
text: {
// 读取数据时触发
get() {
return this.text1 + this.text2
},
// 修改数据时触发
set(val) {
//this.text = 10;无法修改
console.log(val);
console.log(this.text);//是this.text1 + this.text2
}
}
},
watch: {
aa: {
handler(newval, oldval) {
console.log(newval, oldval);
console.log(1);
}
},
immediate: true,
deep: true,//deep 深度监听
}
//以上两种写法是watch监听器的普通用法，这种用法有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有当值发生改变时才会执行。
// 如果我们需要在最初绑定值的时侯，也执行监听函数，则就需要用到immediate属性。
// 比如，当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate属性设置为true，结合handler方法使用。
// 当设置immediate属性为true时，无论值是否发生改变，时刻都会监听；
// 当设置immediate属性为false时，常规用法，只有值发生改变才会监听。
})
</script>
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
