小程序游戏开发平台_Vue数据监听方法watch的使用

Vue数据监听方法watch的使用       这篇文章主要介绍了Vue数据监听方法watch的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 


 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 监听方法watch的使用 /title 
 script src="vue/2.5.16/vue.js" /script 
 /head 
 body 
 div id="root" /div 
 script 
 var vm = new Vue({
 el: "#root",
 data: { obj: {name: "zhaoolee", age: 12} , tel:6666666},
 template: ` div div 姓名: {{obj.name}} /div 
 div 电话: {{tel}} /div 
 input type="text" v-model="obj.name" 
 input type="text" v-model="tel" /div `,
 watch: {
 obj: {
 handler(){
 console.log("obj被改变");
 // 页面加载之初先执行一次handle
 immediate: true,
 // 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能)
 deep: true
 "obj.name": {
 handler(){
 console.log("= obj.name被改变");
 tel:{
 handler(){
 console.log("tel被改变");
 /script 
 /body 
 /html

对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() ;

//使用官方vue-cli脚手架书写
 template 
 //观察数据为字符串或数组
 input v-model="example0"/ 
 input v-model="example1"/ 
 /当单观察数据examples2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数
 input v-model="example2.inner0"/ 
 /template 
 script 
 export default {
 data(){
 return {
 example0:"",
 example1:"",
 example2:{
 inner0:1,
 innner1:2
 watch:{
 example0(curVal,oldVal){
 console.log(curVal,oldVal);
 example1:'a'，//值可以为methods的方法名
 example2:{
 //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
 handler(curVal,oldVal){
 conosle.log(curVal,oldVal)
 deep:true
 methods:{
 a(curVal,oldVal){
 conosle.log(curVal,oldVal)
 /script

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。