使用Vue的计算属性Computed
在conputed中写入写入一个方法即可
计算属性具有缓存的功能，当data里面的数据值被改变的时候 计算属性缓存的内容才会被刷新
new Vue({
//挂载点
el:'',
//数据
data:{},
computed:{}
})
复制代码
监听属性watch
只要data中的值被改变了就会触发
Watch可以有两个传参，第一个形参是被改变后的参数，第二个是原来的参数
new Vue({
//挂载点
el:'',
//数据
data:{},
watch:{
price(newM,oldM){
Console.log(‘原参数’+oldM+’----’+’新参数’+newM)
}
}
})
复制代码
深度监听
基本数据类型可以使用简写的方式 但是引用数据类型不能使用简写的方式
引用数据类型应该用深度监听，加上deep:true
handler方法名是固定的不可以被修改
immediate:true 会立即执行监听器理的handler方法
如果监听的是计算属性 里面的data属性的值发生改变才会触发监听器
watch:{
obj:{
deep:true,
handler(newV,oldV){
console.log(newV);
console.log('值被改了');
},
immediate:true
}
},
复制代码
简单粗暴的方式为，加上一个引号：
'obj.value':function(){
console.log(11);
}
复制代码
如果监听的是计算属性 里面的data属性的值发生改变才会触发监听器
Vue的八大生命周期钩子函数
区别之一:执行顺序的问题beforeCreate>created>beforeMount>mounted
new Vue({
el:'#app'
//Vue实例化对象创建之前
beforeCreate() {
console.log('beforCreate');
},
//Vue实例化对象创建之后
created() {
console.log('created');
},
//Vue的dom挂载之前
beforeMount() {
console.log('beforeMount')
},
//Vue的dom挂载之后
mounted() {
console.log('mounted');
},
//Vue的data值更新前
beforeUpdate() {
console.log('beforeUpdate');
},
//Vue的data值更新之后
updated() {
console.log('updated')
},
//Vue组件的销毁前
beforeDestroy() {
console.log('beforeDestoyr')
},
//Vue组件的销毁后
destroyed() {
console.log('destroyed');
},
})
