山西省住房城乡建设厅网站,chrome手机版,石家庄市城乡建设局网站,单页网站修改目录 一、基本使用1.1 watch配置监视1.2 vm.$watch动态监视1.3 深度监视(deep watch)1.4 简写形式 二、computed和watch的对比2.1 使用watch实现setTimeout操作2.2 用computed无法实现setTimeout 三、其他注意事项3.1 vue devtools的bug3.2 xxxyyy格式3.3 将window传入data中 V… 目录 一、基本使用1.1 watch配置监视1.2 vm.$watch动态监视1.3 深度监视(deep watch)1.4 简写形式 二、computed和watch的对比2.1 使用watch实现setTimeout操作2.2 用computed无法实现setTimeout 三、其他注意事项3.1 vue devtools的bug3.2 xxxyyy格式3.3 将window传入data中 Vue 提供了一种更通用的方式来观察和响应 Vue实例上的数据变动侦听属性也成为监视属性。 一、基本使用 监视属性watch:
当被监视的属性变化时回调函数handler自动调用进行相关操作。监视的属性必须存在才能进行监视。监视的两种写法 a. new Vue时传入watch配置 b. 通过vm.$watch来动态实现监视
1.1 watch配置监视
下面案例中我们通过watch配置属性来给isHuoguo 添加监视当isHuoguo发生变化时所配置的handler()函数会调用。
注意这里有一个属性immediate其默认值为false。当配置为true时页面初始化时让handler调用一下。
div idrooth2今天我们去吃{{info}}/h2button clickchange切换/button
/div
scriptconst vm new Vue({el:#root,data:{isHuoguo:true},computed:{info() {return this.isHuoguo?火锅:南京大排档;}},methods: {change() {this.isHuoguo !this.isHuoguo;}},watch: {isHuoguo:{immediate:true,//默认为false初始化时让handler调用一下。handler(newValue, oldValue) {console.log(isHuoguo属性被修改了newValuenewValueoldValueoldValue);}}}})
/script效果图如下 1.2 vm.$watch动态监视
不仅可以给属性即data中定义的添加监视也可以给计算属性添加监视。
下面例子我们通过vm.$watch 方式来动态给计算属性info添加监视
div idrooth2今天我们去吃{{info}}/h2button clickchange切换/button
/div
scriptconst vm new Vue({el:#root,data:{isHuoguo:true},computed:{info() {return this.isHuoguo?火锅:南京大排档;}},methods: {change() {this.isHuoguo !this.isHuoguo;}},watch: {isHuoguo:{// immediate:true,//默认为false初始化时让handler调用一下。handler(newValue, oldValue) {console.log(isHuoguo属性被修改了newValuenewValueoldValueoldValue);}}}})// 监视计算属性vm.$watch(info,{// immediate:true,//默认为false初始化时让handler调用一下。handler(newValue, oldValue) {console.log(info计算属性被修改了newValuenewValueoldValueoldValue);}})/script1.3 深度监视(deep watch)
深度监视(deep watch)
Vue中的watch默认不监测对象内部值的改变只监测一层结构配置deep:true可以监测对象内部值的改变可以监测多层结构Vue默认不开启deep是为了提供效率。Vue自身可以监测对象内部值的改变但是Vue提供的watch默认不可以。使用watch时要根据数据的具体结构决定是否采用深度监视。
使用方式
监视多级结构中某个属性的变化例如下面例子中numbers.a监视多级结构中所有属性的变化numbers:{deep:true,handler(){}}
div idrooth3今天我们去吃{{info}}/h3button clickchange切换/buttonhrh3a的值是{{numbers.a}}/h3button clicknumbers.a点击a/buttonhrh3b的值是{{numbers.b}}/h3button clicknumbers.b点击b/button
/div
scriptconst vm new Vue({el:#root,data:{isHuoguo:true,numbers:{a:1,b:1}},computed:{info() {return this.isHuoguo?火锅:南京大排档;}},methods: {change() {this.isHuoguo !this.isHuoguo;}},watch: {isHuoguo:{handler(newValue, oldValue) {console.log(isHuoguo属性被修改了newValuenewValueoldValueoldValue);}},// 监视多级结构中某个属性的变化numbers.a: {handler() {console.log(a被改变了);}},// 监视多级结构中所有属性的变化numbers:{deep:true,handler() {console.log(numbers改变了);}}}})/script1.4 简写形式
当所配置的监视只需要handler不需要其他配置的时候才可以使用简写形式使用函数来代替。
两类简写形式
watch配置里的简写动态添加监视的简写
div idrooth3今天我们去吃{{info}}/h3button clickchange切换/button
/div
scriptconst vm new Vue({el:#root,data:{isHuoguo:true},computed:{info() {return this.isHuoguo?火锅:南京大排档;}},methods: {change() {this.isHuoguo !this.isHuoguo;}},watch: {/* isHuoguo:{deep:true,immediate:true,handler(newValue, oldValue) {console.log(isHuoguo属性被修改了newValuenewValueoldValueoldValue);}}, */// 简写形式isHuoguo(newValue, oldValue) {console.log(isHuoguo属性被修改了newValuenewValueoldValueoldValue);}}})// 动态添加监视的简写vm.$watch(isHuoguo,function(newValue, oldValue){console.log(isHuoguo属性被修改了newValuenewValueoldValueoldValue);})/script二、computed和watch的对比 计算属性computed和监视属性watch之间的区别
computed能完成的功能watch都可以完成watch能完成的功能computed不一定能完成例如watch可以进行异步操作。
两个重要的原则 3. 被Vue所管理的函数最好写成普通函数这样this的指向才是vm或组件实例对象 4. 所有不被Vue管理的函数定时器的回调函数(setTimeout)、ajax的回调函数、Promise的回调函数等最好写成箭头函数这样this的指向才是 vm或 组件实例对象。
2.1 使用watch实现setTimeout操作
下面代码使用了watch实现setTimeout操作有一点需要注意的是setTimeout所指定的回调函数要使用箭头函数(因为箭头函数本身没有this)否则this指向window了而不再是vm实例。
div idrootdiv classrow姓input typetext v-modelfirstName/divdiv classrow名input typetext v-modellastName/divdiv classrow全名span{{fullName}}/span/div
/divscriptconst vm new Vue({el:#root,data() {return {firstName: 小,lastName: 三,fullName:小-三};},methods:{},watch:{firstName(val) {setTimeout(() { //这里不能写成普通函数否则this指向window了console.log(this); //vm实例对象this.fullName val - this.lastName;}, 1000);},lastName(val){this.fullName this.firstName - val;}}});
/script2.2 用computed无法实现setTimeout
用computed计算属性无法实现setTimeout想要的功能如下错误代码所示
div idrootdiv classrow姓input typetext v-modelfirstName/divdiv classrow名input typetext v-modellastName/divdiv classrow全名span{{fullName}}/span/div/divscriptconst vm new Vue({el:#root,// 对于Vue来说data中配置的就是属性。// 计算属性用现有的属性去加工、计算生成一个全新的属性。和属性分开放data:{firstName: 小,lastName: 三},computed:{fullName() {console.log(get被调用了!);// console.log(this);setTimeout(() {return this.firstName-this.lastName}, 1000);}}});
/script三、其他注意事项 3.1 vue devtools的bug
当页面上没有用到某个计算属性时vue devtools调试工具会出现一个bug不会显示数据的变化了。例如下面代码
div idrooth2今天我们去吃米饭/h2button clickchange切换/button
/div
scriptconst vm new Vue({el:#root,data:{isHuoguo:true},computed:{info() {return this.isHuoguo?火锅:南京大排档;}},methods: {change() {this.isHuoguo !this.isHuoguo;}},})
/script点击切换按钮工具中显示的data和computed 不发生变化其实数据已经发生了改变。可以通过控制台中输入vm.info来查看。如下图所示 3.2 xxxyyy格式
这里的yyy不是事件名称而是一些简单的语句。例如clickisHuoguo !isHuoguo;count;
下面的案例中两个按钮均可实现功能。不过需要注意的是执行语句比较复杂的时候不建议直接写在yyy中。
div idrooth2今天我们去吃{{info}}--切换次数{{count}}/h2button clickchange切换/buttonbutton clickisHuoguo !isHuoguo;count切换2/button
/div
scriptconst vm new Vue({el:#root,data:{isHuoguo:true,count:0,},computed:{info() {return this.isHuoguo?火锅:南京大排档;}},methods: {change() {this.count;this.isHuoguo !this.isHuoguo;}},})
/script3.3 将window传入data中
将window传入data中实现alert弹框。如下代码所示
div idrooth2今天我们去吃{{info}}--切换次数{{count}}/h2button clickchange切换/buttonbutton clickisHuoguo !isHuoguo;count切换2/buttonbutton clickwindow.alert(1)弹出alert/button
/div
scriptconst vm new Vue({el:#root,data:{isHuoguo:true,count:0,window //相当于window:window},computed:{info() {return this.isHuoguo?火锅:南京大排档;}},methods: {change() {this.count;this.isHuoguo !this.isHuoguo;}},})
/script
