搜索到
1
篇与
的结果
-
监视属性 当被监视的属性发生变化时，回调函数自动调用，进行相关操作监视的属性必须存在，才能进行监视两种写法：new Vue时传入watch配置通过vm.$watch监视<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>姓名案例_watch实现</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 姓名：<span>{{fullName}}</span> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', fullName: '张-三' }, watch: { firstName(newValue) { //定时器指定的回调不是Vue实例管理的，此处可以用箭头函数 setTimeout(() => { this.fullName = newValue + '-' + this.lastName }, 1000) }, lastName(newValue) { this.fullName = this.firstName + '-' + newValue } } }) </script> </body> </html>深度监视：Vue中的watch默认不监测对象内部值得改变（一层）；配置deep:true可以监测对象内部值改变（多层）注：Vue自身可以监测对象内部值得改变，但Vue提供的watch默认不可以 使用watch时应根据数据的具体结构，决定是否采用深度监视<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天气案例_深度监视（简写）</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <br> <button @click="changeWeather">切换天气</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { isHot: true, }, computed: { info() { return this.isHot ? '炎热' : '凉爽'; } }, methods: { changeWeather() { this.isHot = !this.isHot; } }, watch: { //正常写法 /* isHot: { //immediate: true, //初始化时调用handler //deep: true, //深度监视 handler(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue) } }, */ //简写（当监视属性不需要配置其他选项时(immediate,deep)，可以使用简写） /* isHot(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue) } */ } }) //正常写法 /* vm.$watch('isHot', { //immediate: true, //初始化时调用handler //deep: true, //深度监视 handler(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue) } }) */ //简写 vm.$watch('isHot', function (newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue); }) </script> </body> </html>computed与watch的区别：computed能完成的功能，watch也能完成；watch能完成的功能，computed不一定能完成，如：watch可以进行异步操作所有被Vue管理的函数，最好写成普通函数，这时this的指向才是vm或组件实例对象所有不被Vue管理的函数（定时器回调，ajax的回调，Promise的回调等），最好写成箭头函数，这样this的指向才是vm或组件实例对象（涉及Vue原型链）
