computed计算属性、watch侦听器、生命周期

计算属性

点击查看 Vue文档

基础语法

多次使用计算属性，计算属性方法也只执行一次，
调用计算属性的方法不能加()
在这里插入图片描述

直接修改计算数学的值

计算属性不能通过双向绑定修改（默认不能改）
想要修改计算属性，就必须使用计算属性的完整写法

完整写法
计算属性：{
//计算属性默认只有get，在需要的时候添加set()
get(){
return 结果
},
ser(val){
//val就是修改后的计算属性
}
}

watch侦听器

作用：侦听数据变化，执行一些业务逻辑或异步操作
如果监听对象中的属性，不能直接当函数名，需要加上引号
在这里插入图片描述
监听from、q、to变化时，都要重新翻译，则可以直接监听一个对象

watch:{
数据：{
handler(变化后的值，变化前的值)
},
deep：true ,//加入改配置，表示深度监听：当对象的任意属性值改变后，都可以侦听到
immediate:true//立即侦听（页面刷新，马上执行一次handler函数）
}

watch的两种写法

函数watch:{watchData(newValue,oldValue){//newValue时属性变化后的值，oldValue是属性变化前的值//对应的操作...}}对象watch:{watchData:{handler: function(newValue, oldValue) {//newValue时属性变化后的值，oldValue是属性变化前的值// 对应的操作...} }}

watch还有立即监听和深度监听

生命周期

在这里插入图片描述

Vue生命周期函数（钩子函数）自动执行的函数

每个阶段对应两个钩子函数
在这里插入图片描述

<div id="app"><h2>{{title}}</h2><button @click="count--">-</button><span>{{count}}</span><button @click="count++">+</button></div><script src="../utils/vue.js"></script><script>const vm = new Vue({el: '#app',data: {title: '钩子函数演示',count: 100},// 创建阶段beforeCreate() {console.log('beforeCreate：', this.count); //此时还不能使用data数据以及调用methods方法},created() {console.log('created:', this.count); //此时可以使用data数据，可以调用methods方法},// 挂在阶段beforeMount() {console.log('beforeMount:', document.querySelector('h2'));},mounted() {console.log('beforeMount:', document.querySelector('h2'));},// 更新阶段（数据更新才触发）beforeUpdate() {// 数据更新了但是页面还没有更新console.log('beforeUpdated:', this.count, document.querySelector('span').innerHTML);},updated() {// 数据、页面都更新console.log('updated:', this.count, document.querySelector('span').innerHTML);}})</script>