computed计算属性和watch监听的区别
computed属性
首先computed计算属性是用于在HTML模板中表达式更加简洁，易维护。
特点：
-
computed具有缓存功能，当与computed变量相关的变量值不发生改变时，一直用的是缓存中的值，只有当依赖变量值发生改变时，computed计算属性值才会发生更新；
-
computed变量不在data中定义，而是在computed对象中定义；
<!DOCTYPE html>
<html lang="en">
<head>
<title>computed计算属性</title>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<!-- 计算属性应用 -->
<div>{{reverseString}}</div>
<div>{{reverseString}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
msg: 'wanghe',
msg1: 'baba'
},
methods: {},
//计算属性的用法
//计算属性是进行缓存了，而方法不存在缓存
computed: {
reverseString: function() {
console.log(this.msg);
return this.msg1.split('').reverse().join('');
},
}
});
</script>
</body>
</html>
watch属性
特点：
-
watch监听属性监听的是data中已经存在的变量，只有当变量值发生改变时，会触发watch监听属性中的相应的方法。
-
当需要在数据变化时执行异步或开销较大的操作时，这时watch是非常有用的
-
watch只能监听简单数据类型，当监听对象、数组等复杂数据类型时，其中的元素值改变也不会触发watch中监听对象的方法。
-
但是可以采用深度监听来监听对象的变化，设置deep: true，就可以解决特点3的问题来监听某个对象的属性，但是当对象嵌套的属性太深时开销太大。
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<title>侦听器</title>
</head>
<body>
<div id="app">
<div>
<span>名：</span>
<span><input type="text" name="" v-model="lastname" @input="handle"></span>
</div>
<div>
<span>性：</span>
<span><input type="text" name="" v-model="firstname" @input="handle"></span>
</div>
<div>
{{getFullname}}
</div>
<div>{{obj}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
fullname: '',
firstname: '',
lastname: '',
obj: {
name: "wh",
age: 23
}
},
methods: {
handle: function () {
this.fullname = this.firstname + this.lastname;
// 每次输入都让obj对象的age自增，对象的属性值的变化是不能触发obj监听方法的
this.obj.age++
// 注意!!!!!!!!只有当这个obj整个对象值改变时才会触发obj的watch监听方法
// this.obj = { mes: "值已经改变" }
},
},
//加入监听器，监听器会一直监听属性的变化，一旦变化，就会执行对应的方法
watch: {
//val表示firstname的当前的最新值，只要值发生变化就会触发这个方法
firstname: function (val) {
this.fullname = val + ' ' + this.lastname;
},
lastname: function (val) {
this.fullname = this.firstname + ' ' + val;
},
// 不采用深度监听不能够监听到对象属性值的改变
// obj: function (val) {
// console.log(val);
// },
// 采用深度监听来监听对象属性值的改变
obj: {
// handler为固定属性，不能改变名字
handler: function (val) {
console.log(oldval);
console.log(newVal);
},
// immediate: true代表在watch对象中声明了obj这个监听属性后会立即执行handler方法，在正常情况下只有当obj对象属性值改变时才会触发handler
immediate: true,
// 是否深度监听，默认值为false
deep: true
},
},
//添加计算属性实现
computed: {
getFullname: function () {
return this.firstname + this.lastname;
}
},
});
</script>
</body>
</html>
