Vue2基础-Vue2中的计算属性和监视属性（HTML版）
目录
-
- 一、Vue2中的计算属性computed
- 二、Vue2中的监视属性watch
- 三、computed和watch之间的区别
- 四、官方对watch的解释
- 五、个人对computed与watch的一些理解
Vue2基础全套教程合集：点击跳转 Vue2高级全套教程合集：点击跳转
该篇并不准备一上来就将计算属性的用法抛出，而是通过案例形式，循序渐进的理解computed属性和watch属性的具体用处以及如何使用。
一、Vue2中的计算属性computed
计算属性：
- 定义：要用的属性不存在，要通过已有属性计算得来。
- 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
- get函数什么时候执行？
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
- 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
- 备注：
- 计算属性最终会出现在vm上，直接读取使用即可。
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
案例：实现一个姓名动态拼接展示输入的姓和名
实现方法一：通过插值语法直接拼接实现
<body>
<!-- 准备好一个容器-->
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{firstName}}-{{lastName}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
}
})
</script>
实现方法二：通过插值语法+methods方法实现，此时已经有了computed计算属性的雏形。
<body>
<!-- 准备好一个容器-->
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{fullName()}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
methods: {
// 当依赖的数据被改变时，则方法会被调用。但是methods不会缓存数据
fullName(){
console.log('@---fullName')
return this.firstName + '-' + this.lastName
}
},
})
</script>
实现方法三：通过计算属性实现该案例
<body>
<!-- 准备好一个容器-->
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
测试：<input type="text" v-model="x"> <br/><br/>
全名：<span>{{fullName}}</span> <br/><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
x:'你好'
},
methods: {
demo(){
}
},
computed:{
// 完整写法
// fullName是将get的返回值赋值给vm上，而不是fullName对象赋值给vm
fullName:{
//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
get(){
console.log('get被调用了')
// console.log(this) //此处的this是vm
return this.firstName + '-' + this.lastName
},
//set什么时候调用? 当fullName被修改时。
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
},
// 简写，不可与完整写法同时存在
/* fullName(){
console.log('get被调用了')
return this.firstName + '-' + this.lastName
} */
}
})
</script>
二、Vue2中的监视属性watch
- 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
- 监视的属性必须存在，才能进行监视！！
- 监视的两种写法：
- new Vue时传入watch配置
- 通过vm.$watch监视
- 深度监视：
- Vue中的watch默认不监测对象内部值的改变（一层）。
- 配置deep:true可以监测对象内部值改变（多层）。
- 备注：
- Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
- 使用watch时根据数据的具体结构，决定是否采用深度监视。
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
<hr/>
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
{{numbers.c.d.e}}
</div>
</body>
<script type="text/javascript">
// Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1,
c:{
d:{
e:100
}
}
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
watch:{
//简写
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
},
isHot:{
// immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
//监视多级结构中某个属性的变化
'numbers.a': {
handler(newVal,oldVal) {
console.log("numbers中a的值发生了变化",newVal,oldVal)
}
},
//监视多级结构中所有属性的变化
numbers: {
deep: true,
// 注意：监视数组的时候是不需要开启deep的。
handler(newVal,oldVal) {
console.log("numbers中的值发生了改变")
}
},
}
})
// 简写
vm.$watch('isHot',(newValue,oldValue)=>{
console.log('isHot被修改了',newValue,oldValue,this)
})
// 官方文档格式，vm.$watch(expOrFn, cellback, [options])
vm.$watch(
'isHot',
function (newValue, oldValue) {
//function什么时候调用？当isHot发生改变时。
console.log('isHot被修改了',newValue,oldValue)
},
{
// immediate:true, //初始化时让handler调用一下
immediate: true
}
)
</script>
三、computed和watch之间的区别
- computed能完成的功能，watch都可以完成。
- watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
- 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
- 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
四、官方对watch的解释
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
五、个人对computed与watch的一些理解
- computed更注重回调函数返回的结果和对数据的操作，watch注重的是某个属性变更时的执行过程。
- 当你需要在数据改变时做一些事情，推荐使用watch，而当你需要在数据改变时得到一个结果，推荐使用computed。
官方computed与watch文档地址：点击跳转
源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通