vue2中侦听器watch的使用

最新推荐文章于 2024-04-06 08:53:37 发布

coder_yanMing

最新推荐文章于 2024-04-06 08:53:37 发布

阅读量1.1k

点赞数

分类专栏： vue2的基本使用文章标签： vue.js

本文链接：https://blog.csdn.net/SW_promise/article/details/124519379

版权

vue2的基本使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是侦听器?

在开发中我们在data返回的对象中定义了数据,这个数据通过插值语法(mustache语法)等方式绑定到template中,当数据发生变化时,template会自动进行更新来显示最新的数据
但是在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这时就需要用侦听器watch来完成了
在开发中,一般用侦听器监听props的情况比较多

侦听器的基本使用

我们希望用户在input框中数据内容的时候,每次输入我们都可以获取到最新的内容,之后去访问服务器来输出答案


<!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>
</head>
<body>
  
  <div id="app"></div>

  <template id="my-app">
    请输入您的问题:<input type="text" v-model="userQuestion">
    <!-- <button>百度一下,查找答案</button> -->
    您的答案是:{{answer}}
  </template>

  <script src="https://unpkg.com/vue@next"></script>

  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          userQuestion:'',
          answer:''
        }
      },
      watch: {
        // userQuestion是我们要侦听的数据名称
        userQuestion(newValue,oldValue){
          // 第一个参数是新值,第二个参数是旧值
          console.log(`新值:${newValue},旧值:${oldValue}`);

          // 之后发起数据请求,渲染页面的答案
          this.answer=`我是问题${newValue}的答案`
        }
      },
    }
    Vue.createApp(App).mount('#app');
  </script>
</body>
</html>

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>
</head>
<body>
  
  <div id="app"></div>

  <template id="my-app">
    <h2>{{info.name}}</h2>
    <button @click="changeInfo">改变当前监听的info</button>
    <button @click="changeInfoName">改变info.name</button>
    <button @click="changeInfoNbaName">改变info.nba.name</button>
  </template>

  <script src="https://unpkg.com/vue@next"></script>

  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          info: { name: "why", age: 18, nba: {name: 'kobe'} }
        }
      },
      watch: {
        // 默认情况下我们的侦听器只会针对监听的数据本身的改变(内部发生的改变是不能侦听)
        // info(newInfo, oldInfo) {
        //   console.log("newValue:", newInfo, "oldValue:", oldInfo);
        // }

        // 深度侦听/立即执行(一定会执行一次)
        info: {
          handler: function(newInfo, oldInfo) {
            console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name);
          },
          deep: true, 
              // 深度侦听（可以监听到当前监听对象 内部数据的改变）
          // immediate: true
            // 立即执行（如果开启立即执行，那么会在页面刚开始加载的时候先执行一次）
        },
        
        'info.name':function(newInfo, oldInfo){
          console.log(newInfo,oldInfo);
          //我们也可以监听对象中的某一个属性
        }
      },

      methods: {
        changeInfo() {
          this.info = {name: "kobe",age: 18, nba: {name: 'kobe'}};
        },
          // 改变我们当前侦听的对象，侦听属性可以侦听到

        changeInfoName() {
          this.info.name = "kobe";
        },
          // 改变当前侦听对象里面的一个属性，侦听属性侦听不到
          // 这个时候就需要添加deep：true了

        changeInfoNbaName() {
          this.info.nba.name = "james";
        }
          // 当添加过深度侦听之后，即使是内部还有嵌套的对象，依然是可以监听到的
      }
    }
    Vue.createApp(App).mount('#app');
  </script>
</body>
</html>

coder_yanMing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue2中侦听器watch的使用

什么是侦听器?在开发中我们在data返回的对象中定义了数据,这个数据通过插值语法(mustache语法)等方式绑定到template中,当数据发生变化时,template会自动进行更新来显示最新的数据但是在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这时就需要用侦听器watch来完成了在开发中,一般用侦听器监听props的情况比较多侦听器的基本使用我们希望用户在input框中数据内容的时候,每次输入我们都可以获取到最新的内容,之后去访问服务器来输出答案<!DOCTYPE html
复制链接

扫一扫