目录
vue 之 watch 监听器
- 要监听 data 中哪个数据的变化,就把数据名作为方法名即可。
- 监听函数中有两个值,分别为数据变化的新值(newVal),旧值(oldVal)。
1、方法格式的监听器
- 缺点 1:无法在首次进入页面时,自动触发监听函数。
- 缺点 2:如果监听的是一个对象,对象中的值发生变化,并不会触发监听器。
<div id="app">
<input type="text" v-model="username" />
</div>
const vm = new Vue({
el: "#app",
data: {
username: "",
},
watch: {
username(newVal, oldVal) {
console.log("变化", newVal, oldVal);
},
},
});
- watch 除了可以监听 data 中数据的变化,还可以监听路由的变化, 监听 $route.path 属性,如:
watch:{
'$route.path':function(newVal,oldVal){
//console.log(newVal+"---"+oldVal);
if(newVal === '/login'){
console.log('欢迎进入登录页面');
} else if(newVal === '/register'){
console.log('欢迎进入注册页面');
}
}
}
2、对象格式的监听器
- 优点 1:可以通过 immediate 选项,让监听器自动触发。
watch: {
// username(newVal, oldVal) {
// console.log("变化", newV oldVal);
// },
username: {
handler(newVal, oldVal) {
console.log("变化", newVal, oldVal);
},
immediate: true, //首次进入就会触发一次
},
},
- 优点 2:可以通过 deep 选项,让监听器深度监听对象中每个属性的变化。
data: {
info: {
username: "admin",
},
},
watch: {
info: {
handler(newVal, oldVal) {
console.log(newVal, oldVal);
//监听的是对象
},
immediate: true,//立即监听
deep: true,//深度监听
},
//或者直接监听对象的某一个属性
// "info.username": {
// handler(newVal, oldVal) {
// console.log(newVal, oldVal);
// },
// },
},
vue 之 computed 计算属性:
1、特点:
- 计算属性适用于一个值依赖多个值时
- 计算属性依赖于外部数据源,一旦外部数据变化,计算属性也自动计算,复用方便。
- computed 具有缓存功能
- 计算属性中的方法可以直接当做 data 中的值调用
2、例子:
.bg {
width: 200px;
height: 200px;
border: 1px solid #000;
}
<div class="bg" :style="{backgroundColor:rgb}"></div>
data: {
r: 0,
g: 110,
b: 220,
},
computed: {
//计算属性依赖于外部数据源,一旦外部数据变化,计算属性也自动计算,复用方便。
//计算属性具有缓存功能
//rgb 作为计算属性,被定义成了方法格式,
//并且在vue的实例中可以直接调用 this.rgb 将rgb方法作为data中的值,直接调用即可
rgb() {
return `rgb(${this.r},${this.g},${this.b})`;
},
},
watch 和 computed 有什么区别?
- computed 是计算属性在使用时和 data 对象中的数据属性是类似的,watch 是用于监听某一个属性的变化的,computed 擅长的是一个数据受多个数据影响,然而 watch 是用于监听某一个属性的变化的。
- computed 支持缓存只有依赖数据发生改变,才会重新进行计算,computed 基于它们的响应式依赖进行缓存的,也就是基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的值,watch 则不支持缓存,数据变,直接会触发相应的操作。watch 的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值。
- computed 不支持异步,computed 内有异步操作时无效,无法监听数据的变化,watch 支持异步。
- computed 在使用时,computed 属性值是函数,那么默认会走 get 方法,函数的返回值就是属性的属性值,在 computed 中的,属性都有一个 get 和一个 set 方法,当数据变化时,调用 set 方法。watch 在使用时,监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据,当数据变化时,触发其他操作,函数有两个参数。immediate(组件加载立即触发回调函数执行),deep(深度监听)为了发现对象内部值的变化,复杂类型的数据时使用。
----不周之处请大家多多指正