一、computed
计算属性:
1.定义:要用的属性不存在,要通过已有属性计算得来。
2.原理:底层借助了Object.defineproperty方法提供的getter和setter。
3.get函数什么时候执行?
(1)初次读取时会执行一次。
(2)当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
(1)计算属性最终会出现在vm上,直接读取使用即可。
(2)如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstname"><br>
名:<input type="text" v-model="lastname"><br>
全名:<h1>{{fullname}}</h1>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
firstname: '张',
lastname: '三'
},
computed: {
fullname: {
//get有什么作用?当有人读取fullname时,get就会被调用,且返回值就作为fullname的值
//get什么时候调用?
//1.初次读取fullname时
//2.所依赖的数据发生变化时
get() {
console.log('get被调用了');
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];
}
}
},
})
</script>
</html>
简写方式:只考虑读取不考虑修改时可以使用
//简写方式
computed: {
fullname() {
console.log('get被调用了');
return this.firstname + '_' + this.lastname;
},
},
二、watch
1.watch简单案例
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视
3.监视的两种写法:
(1)new Vue时传入watch配置
(2)通过vm.$watch监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
isHot: true
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot;
}
},
//监视的第一种形式 :当创建实例时已经想好监视谁
watch: {
isHot: {
immediate: true, //初始化时让handler调用一下
//handler什么时候调用?当isHot发生改变时
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue);
}
}
}
})
//监视的第二种形式:创建实例时还不知道监视谁,后续根据用户的行为决定监视谁
vm.$watch('isHot', {
immediate: true,
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue);
}
})
</script>
</html>
注意:当不需要配置immediate、deep时可以简写
watch: {
isHot(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue);
}
}
vm.$watch('isHot', function (newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue);
}
)
2.深度监视
深度监视:
1.Vue中的watch默认不监测对象中内部值的改变(一层)。
2.配置deep:true可以监测对象内部值改变(多层)。
备注:
1.Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以。
2.使用watch时根据数据的具体结构,决定是否采用深度监视。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">让b+1</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
numbers: {
a: 1,
b: 2
}
},
watch: {
//监视多级结构中某个属性的变化
'numbers.a': {
handler() {
console.log('a被改变了');
}
},
'numbers.b': {
handler() {
console.log('b被改变了');
}
},
//监视多级结构中所有属性的变化
numbers: {
deep: true,
handler() {
console.log('numbers改变了');
}
}
}
})
</script>
</html>
watch对比computed
computed和watch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能,computed不一定能完成。例如:watch可以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象。
2.所有不被Vue管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm或组件实例对象。
使用原则:从功能的互补上看待methods,watch和computed的关系
1.数据量大,需要缓存的时候用 computed ;每次确实需要重新加载,不需要缓存时用 methods 。
2.当我们需要进行数值计算时,并且依赖于其他数据时,应该使用computed;当我们需要在数据变化时执行异步或者开销较大的操作时,应该使用watch
3.computed适用场景:实际得到的数据不能直接放到页面中展示,而是需要进行一些操作处理,就使用computed。(一个数据受多个数据影响;)
4.watch适用场景:一个数据影响多个数据;