vue2 第三节 计算属性_侦听器 watch_生命周期
文章目录
- 1.计算属性
- 1.1 基本概念
- 1.2 computed计算属性vs methods方法
- 1.3 计算属性完整写法
- 2.侦听器 watch
- 3.生命周期
1.计算属性
1.1 基本概念
概念:基于现有的数据,计算出来的新属性.依赖于数据变化,自动重新计算.
语法:
1.声明在computed配置项中,一个计算属性对应一个函数
2.使用起来和普通属性一样使用{{计算属性名}}
计算属性->可以将一段求值的代码封装
<body><div id="app">{{sum}}</div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data:{data1:10,data2:20,msg:'',},computed:{sum(){return this.data1+this.data2;}}})</script>
</body>
</html>
1.2 computed计算属性vs methods方法
方法也能实现上面的操作,为什么要用计算属性
计算属性会对计算出来的结果缓存,再次使用直接读取缓存.
依赖项变化,才会自动重新计算,并再次缓存
方法不会缓存,没用一次就执行一次方法
computed 计算属性写在 computed 配置项中:
作为属性,直接使用->this.计算属性{{计算属性}}
methods 方法:
作用:给实例提供一个方法,调用以处理业务逻辑
语法:
写在 methods 配置项中
作为方法,需要调用 this.方法名 {{方法名()}} @事件名=“方法名”
1.3 计算属性完整写法
什么时候写计算属性的完整方法?
当我们要修改计算属性的时候,需要我们完整的写出计算属性,才能进行修改.但是一般情况下来说,不适用计算属性进行修改
完整计算属性的写法是
get()+set()
之前的简写,就只是 get(),简写省略了set(),set 用于修改数据,get 用于创建数据
<body><div id="app">姓:<input type="text" v-model="fristname">名:<input type="text" v-model="secondname"><br>姓名是:{{fullname}}<br><button @click="changename">改名卡</button></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data:{fristname: '',secondname: '',data1: 10,data2: 20,msg: '',},computed: {fullname: {get(){return this.fristname + this.secondname;},set(value){this.fristname=value.slice(0,1);this.secondname=value.slice(1);}}},methods: {changename() {this.fullname = '吕小布';}}})</script>
</body></html>
2.侦听器 watch
作用: 监视数据变化,执行一些 业务逻辑或异步操作
- 简单写法
- 完整写法
简单写法就是根据 data 中的数据
默认有两个形参,一个新值,一个旧值,一般来说,使用的都是新值,旧值的形参可以省略不写
data :{words
},watch{words(newValue,oldValue){}
}
完整写法多了两个扩展项
- 深度监听 deep:true
- 初始化立即执行 immediate:true
深度监听,就是可以监听整个对象及他内部每一个属性,假如不用深度监听,监听一个 obj,obj.age 发生变化,是触发不了侦听器的
当初始化页面的时候,就想触发侦听器触发渲染页面,就要用 immediate
data :{words
},watch{words:{deep:trueimmediate:true,handler(newValue){}}
}
3.生命周期
- 创建阶段 响应式数据,即有数据,但是没有渲染页面(操作 dom)
- 挂载阶段 操作dom
8 个钩子函数中重要的是 created mounted