09-2监视属性

最新推荐文章于 2024-10-12 10:41:56 发布

终是痴情负了空

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量172

点赞数

分类专栏： vue基础文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51092575/article/details/126448105

版权

vue基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.监视属性watch:

1.当被监视的属性变化时,回调函数自动调用,进行相关操作2.监视的属性必须存在,才能进行监视；
2.监听属性也称作侦听属性
3.监视的两种写法:

new Vue时传入watch配置
通过vm.Swatch监视

天气案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <h2>今天天气很好{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
  Vue.config.productionTip = false;
  Vue.config.keyCodes.huiche = 13//定义了一个别名按键13
  //创建vue实例
  const vm = new Vue({
    el:'#root',
    //data中存储属性
    data:{
      isHot:true,
    },
    methods:{
      changeWeather(){
        this.isHot = !this.isHot
        // x++
      }
    },
    computed:{
      info(){
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    /*watch:{
      //监视属性实现
      isHot:{
        //作用：初始化时让handler调用一下
        immediate:true,
        //当isHot发生改变时调用
        handler(newValue,oldValue){
          console.log('isHot被修改了',newValue,oldValue)
        },
  }
    }*/
  })
  vm.$watch('info',{
    immediate:true,
    //当isHot发生改变时调用
    handler(newValue,oldValue){
      console.log('info被修改了',newValue,oldValue)
    }
  })
</script>
</body>
</html>

2.深度监视实现

(1).Vue中的watch默认不监测对象内部值的改变(一层)
(2).A置deep:true可以监测对象内都值改变(多层）
备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构,决定是否采用深度监视

天气案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <h2>今天天气很好{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
  <hr>
  <h3>a的值是：{{numbers.a}}</h3>
  <button @click="numbers.a++">点我，a+1</button>
  <button @click="numbers.b++">点我，b+1</button>

  <button @click="">彻底替换</button>

</div>
<script type="text/javascript">
  Vue.config.productionTip = false;
  Vue.config.keyCodes.huiche = 13//定义了一个别名按键13
  //创建vue实例
  const vm = new Vue({
    el:'#root',
    //data中存储属性
    data:{
      isHot:true,
      numbers:{
        a:1,
        b:2
      }
    },
    methods:{
      changeWeather(){
        this.isHot = !this.isHot
        // x++
      }
    },
    computed:{
      info(){
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    watch:{
      //监视属性实现
      isHot:{
        //作用：初始化时让handler调用一下
        immediate:true,
        handler(newValue,oldValue){
          console.log('isHot被修改了',newValue,oldValue)
        },
  },
      //监视多及结构中某个属性的变化
      'numbers.a':{
        handler(){
          console.log('a被改变了')
        }
      },
      //监视多及结构中所有属性的变化
      numbers: {
        deep:true,
        handler() {
          console.log('numbers改变了')
        }
      }
    }
  })
</script>
</body>
</html>

3.监视的简写形式

只有在不写deep、immediate属性时，才可以简写：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <h2>今天天气很好{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
  <hr>

</div>
<script type="text/javascript">
  Vue.config.productionTip = false;
  Vue.config.keyCodes.huiche = 13//定义了一个别名按键13
  //创建vue实例
  const vm = new Vue({
    el:'#root',
    //data中存储属性
    data:{
      isHot:true
    },
    methods:{
      changeWeather(){
        this.isHot = !this.isHot
      }
    },
    computed:{
      info(){
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    watch: {
      //监视属性实现
      //正常写法
      // isHot: {
      //   // immediate: true,
      //   // deep:true,
      //   handler(newValue, oldValue) {
      //     console.log('isHot被修改了', newValue, oldValue)
      //   },info
      // 简写
      /*isHot(newValue, oldValue){
        console.log('isHot被修改了', newValue, oldValue)

      }*/
      },

  })
  vm.$watch('isHot',function (newValue, oldValue) {
    console.log('isHot被修改了', newValue, oldValue)

  })
</script>
</body>
</html>

4、用watch实现天气案例

computed利wafch之间的区别:

computed能完成的功能，watch 都可以完成。
watch能完成的功能，computed不，定能完成。例如: watch可以进行异步操作。

两个重要的小原则:

所被Vue管理的函数。最好写成普通函数。这样this的指向才是vm或组件实例对象。
所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成简头函数。
这样this的指向才是vm或组件实例对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  姓：<input type="text" v-model="firstName"><br>
  名：<input type="text" v-model="lastName"><br>
  全名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
  Vue.config.productionTip = false;
  Vue.config.keyCodes.huiche = 13//定义了一个别名按键13
  //创建vue实例
  const vm = new Vue({
    el:'#root',
    //data中存储属性
    data:{
      firstName: '吴',
      lastName:'删',
      fullName:'吴-删'
    },
    watch:{
      firstName(newValue){
        setTimeout(()=>{
          this.fullName = newValue +'-'+ this.lastName
        },2000)
      },
      lastName(newValue){
        this.fullName = this.firstName +'-'+newValue
      }
    }

  })

</script>
</body>
</html>