网站内容一样影响收录,正规的网站制作在哪里,长沙网站推广 下拉通推广,上海公司注册代理电话1.计算属性
2.监视属性
3.计算属性与监视属性之间的关系
一.计算属性
定义#xff1a;要用的属性不存在#xff0c;要通过已有属性计算得来原理#xff1a;底层借助了Object.defineproperty方法提供的getter和setterget函数什么时候会执行#xff1a;初次读取的时候会执…1.计算属性
2.监视属性
3.计算属性与监视属性之间的关系
一.计算属性
定义要用的属性不存在要通过已有属性计算得来原理底层借助了Object.defineproperty方法提供的getter和setterget函数什么时候会执行初次读取的时候会执行一次 当依赖的数据发生改变时会被再次调用优势与methods实现相比内部有缓存机制复用效率更高调试方便计算属性最终会出现在vm上直接读取使用即可如果计算属性要被修改那必须写set函数去响应修改且set中要引起计算时所依赖的数据发生改变使用computed配置来实现在模板中可以直接使用 div idroot姓:input typetext v-modelfirstNamebrbr名:input typetext v-modellastNamebrbr全名:span{{fullName}}/span/divscript typetext/javascriptconst vm new Vue({el:#root,data: {firstName:张,lastName:三},computed: {fullName:{get() {return this.firstName - this.lastName},// 当fullName被修改时调用set(value) {const arr value.split(-)this.firstName arr[0]this.lastName arr[1]}}}}) 修改输入框中的内容时下面的计算属性也会跟着变化 9. 如果只考虑读取不考虑修改的话可以简写为以下形式 script typetext/javascriptconst vm new Vue({el:#root,data: {firstName:张,lastName:三},computed: {// 完整写法// fullName:{// get() {// return this.firstName - this.lastName// },// set(value) {// const arr value.split(-)// this.firstName arr[0]// this.lastName arr[1]// }// }// 简写形式只考虑读取不考虑修改的时候才能使用fullName() {return this.firstName - this.lastName}}})/script 二. 监视属性
1概念监视属性是监视data的属性变化也可以用于监视计算属性
2监视属性传的是一个配置对象监视谁在watch里面就写谁 3监视的属性中必须包含一个handler函数handler函数有两个参数分别代表修改前和修改后的值当监视的属性发生变化时回调函数自动调用进行相关操作
4也可以对commputed中的属性进行监视 const vm new Vue({el: #root,data: {isHot: true},computed: {info () {return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather () {this.isHot !this.isHot}},watch: {info: {handler (newValue, oldValue) {console.log(isHot被修改了)console.log(newValue, oldValue)}}}})
(5) immediate属性设置为true就是初始化的时候让handler调一下 6监视属性的另外一种写法通过调用vm.$watch函数实现监视,第一个参数是isHot, 第二个参数传入的是一个对象与在vm中声明watch配置项中的对象是一样的 vm.$watch(isHot, {immediate: true,// 什么时候调用handler 当isHot被修改的时候handler (newValue, oldValue) {console.log(isHot被修改了)console.log(newValue, oldValue)}})
7深度监视
Vue中的watch默认不监视对象内部值得改变只监视一层通过配置deep:true 可以检测对象内部值的改变实现深度监视多层监视Vue自身可以检测对象内部值得改变但是Vue提供的watch默认不可以使用watch时根据数据的具体结构决定是否采用深度监视如果不加deeptrue的话handler里面的逻辑是不会执行的 div idrooth3a的值是{{numbers.a}}/h3button clicknumbers.a点我让a1/buttonhrh3b的值是{{numbers.b}}/h3button clicknumbers.b点我让b1/button/divscript typetext/javascriptconst vm new Vue({el: #root,data: {isHot: true,numbers: {a: 1,b: 1}},watch: {// 监视多级结构中某个属性的变化numbers: {// 开启深度监视deep: true,handler () {console.log(number改变了)}}}})/script
8如果配置项中只需要handler的时候就可以简写 watch: {// 简写: 配置项中只需要handler的时候就可以简写isHot (newValue, oldValue) {console.log(isHot被修改了, newValue, oldValue)}}// vm的写法 简写只有handlervm.$watch(isHot, function (newValue, oldValue) {console.log(isHot被修改了, newValue, oldValue)})
三.监视属性和计算属性之间的关系
1计算属性computed能完成的功能watch也能实现
2watch能实现的computed不一定能实现watch可以进行异步操作, computed靠的是返回值没有办法实现异步任务 watch里面是直接通过手动修改
3两个小原则
所有Vue管理的函数最好写成普通函数这样this的指向才是vm或者组件实例对象所有不被Vue管理的函数定时器的回调ajax的回调函数 promise的回调函数最好写成箭头函数这样this的指向才是vm或者组件实例对象 const vm new Vue({el:#root,data: {firstName:张,lastName:三,fullName:张-三},// 能开启异步任务watch: {firstName(val) {setTimeout(() {this.fullName val - this.lastName}, 1000)},lastName(val) {this.fullName this.firstName - val}}})
