Vuejs学习笔记-监听属性

最新推荐文章于 2024-06-02 09:41:29 发布

卿卿&

最新推荐文章于 2024-06-02 09:41:29 发布

阅读量149

点赞数 1

分类专栏： Vue学习文章标签： javascript vue.js

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。”

本文链接：https://blog.csdn.net/qq_45773423/article/details/120784866

版权

Vue学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

监视属性

文章目录

监视属性-watch:

当被监视的属性发生变化时，回调函数(handler)自动调用，进行相关操作
监视的属性必须存在，才能进行监视。
监视的两种写法：
1. new Vue时传入watch配置
  1. 通过vm.$watch监视

深度监视：

Vue中的watch默认不监视对象内部值的改变(一层)
配置deep:true可以监视对象内部值的改变(多层)

备注：

Vue自身可以监视对象内部值的变化，但Vue提供的watch不可以
使用watch时根据数据的具体结构，来决定是否采用深度监视。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
   <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
  <h1>今天天气很{{info}}</h1>
  <button @click="changeWeather">切换天气</button>
  <button @click="numbers.a++">点我a+1</button>
  <br>
  <h2>a 的值是{{numbers.a}}</h2>
  <button @click="numbers.b++">点我b+1</button>
  <h2>b 的值是{{numbers.b}}</h2>
  </div>
  <script>
   Vue.config.productionTip = false //阻止vue在启动时生成生产提示
     const vm = new Vue({
          el: '#root',
          data: {
             isHot:true,
             numbers:{
               a:1,
               b:1
             }
          },
          methods: {
            changeWeather(){
              this.isHot = !this.isHot
            }
          },
          computed: {
            info(){
              return this.isHot ? '炎热' : '寒冷'
            }
            },
          watch: {
            isHot:{
              immediate:true,//初始化时让handler调用一下
              //handler 什么时候调用？当isHot发生改变时
              handler(newValue,oldValue){
                console.log('isHot被修改了...',newValue,oldValue)
              }
            },
            //监视多级结构中某个属性的变化
            'numbers.a':{
               handler(newValue,oldValue){
                 console.log('a被改变了...')
               }
            },
            //监视多级结构中所有属性的变化
            numbers:{
              deep:true,
              handler(){
                console.log('numbers改变了')
              }
            }
          }
      })
  </script>

</body>
</html>

computed和watch之间的区别

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

两个重要原则：

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

卿卿&

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs学习笔记-监听属性

监视属性文章目录监视属性computed和watch之间的区别两个重要原则：监视属性-watch:当被监视的属性发生变化时，回调函数(handler)自动调用，进行相关操作监视的属性必须存在，才能进行监视。监视的两种写法：new Vue时传入watch配置通过vm.$watch监视深度监视：Vue中的watch默认不监视对象内部值的改变(一层)配置deep:true可以监视对象内部值的改变(多层)备注：Vue自身可以监视对象内部值的变化，但Vue提供的watch
复制链接

扫一扫