目录
data中的数据就是属性
计算属性（compute）
? ? ? ? 1.定义:通过自己已有的属性计算得来
? ? ? ? 2.原理:底层结束Object.defineproperty方法提供的getter和setter
? ? ? ? 3.get函数什么时候执行
? ? ? ? ? ? 1.初次读取fullName的时候
? ? ? ? ? ? 2.所依赖的数据发生变化的时候
? ? ? ? 4.优势:与methods实现相比,内存有缓存机制(复用),效率更高,调试方便
? ? ? ? 5.备注:
? ? ? ? ? ? 1.计算属性最终会出现再vm上,直接读取即可
? ? ? ? ? ? 2.如果计算属性要被修改,那必须写set函数去相应修改
结合程序来看
<body>
<div id="root">
姓: <input type="text" v-model="fisrtName">
<br>
名: <input type="text" v-model="lastName">
<br>
姓名: <span>{{fullName}}</span>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '#root',
data() {
return {
fisrtName: 'fan',
lastName: 'xiyuan'
}
},
// computed: {
// //完整写法
// fullName: {
// //get有什么作用,当人读取fullName时,get就会被调用
// // 且返回值作为fullName的值
// //set什么时候使用:当需要直接修改fullName的时候
// set(value){
// },
// get() {
// return this.fisrtName + this.lastName
// }
// }
// }
//简易写法:
computed: {
fullName() {
return this.fisrtName + this.lastName
}
}
})
</script>
</body>
运行结果
监视属性（watch）
深度监视:
? ? ? ? (1):Vue中的watch默认不监测对象内部的值的改变(一层)
? ? ? ? (2):配置deep:true可以监测对象内部值改变(多层)
? ? 备注:
? ? ? ? (1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以
? ? ? ? (2)使用watch时根据数据的具体结构,决定是否采用深度监视
代码
<body>
<div id="root">
<h2>今天天气{{info}}</h2>
<button @click="changeWeather">切换天气</button>
<hr>
<h3>a的值是{{number.a}}</h3>
<button @click="number.a++">a+1</button>
<hr>
<h3>a的值是{{number.b}}</h3>
<button @click="number.b++">b+1</button>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '#root',
data() {
return {
isHot: true,
number: {
a: 1,
b: 2
}
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
watch: {
number: {
deep: true,
handler() {
console.log("number改变了")
}
},
isHot: {
//immediate:ture,//初始化时让handler调用一下
handler(newValue, oldValue) {
console.log("isHot被修改了", newValue, oldValue)
}
},
}
})
</script>
</body>运行结果
监视的简写
<body>
<div id="root">
<h2>今天天气{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data() {
return {
isHot: true
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
watch: {
//正常写法
// isHot: {
// //immediate:ture,//初始化时让handler调用一下
// handler(newValue, oldValue) {
// console.log("isHot被修改了", newValue, oldValue)
// }
// }
//简易写法
//简写不能配置immediate和deep
// isHot(newValue, oldValue) {
// console.log('isHot被修改', newValue, oldValue)
// }
}
})
vm.$watch('isHot', {
handler(newValue, oldValue) {
console.log("SB", newValue, oldValue)
}
})
</script>
</body>
compute和watch的区别
computed和wantch之间的区别:
? ? ? ? ? ? 1.computed能完成的任务,watch都能完成
? ? ? ? ? ? 2.watch能完成的任务,computed不一定能完成,例如:watch可以进行异步操作(eg:setTimeout)
? ? ? ? ?两个重要的原则:
? ? ? ? ? ? 1.所被Vue管理的函数,最好写成普通函数,这样this指向的才是vm和组件实例对象
? ? ? ? ? ? 2.所有不被Vue所管理的函数(定时器的回调函数,ajax的回调函数等),最好写成箭头函数
? ? ? ? ? ? ? ? 这样this的指向才是vm 或者 组件实例对象
<div id="root">
姓:<input type="text" v-model="firstName">
<br>
名:<input type="text" v-model="lastName">
<br>
姓名:<span>{{name}}</span>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data() {
return {
firstName: 'fan',
lastName: 'xiyuan',
name: 'fanxiyuan'
}
},
watch: {
firstName(newValue) {
setTimeout(() => {
this.name = newValue + this.lastName
}, 1000)
},
lastName(newValue) {
this.name = this.firstName + newValue
}
}
})
</script>
</body>