Detailed explanation of using Vue watch

This time I will bring you a detailed explanation of the use of Vue watch. What are the precautions when using Vue watch. The following is a practical case, let's take a look.

The watch itself is easy to understand. The watch is responsible for associating the data in the view with a certain function

When the data in the Vue view changes, the associated function will be executed

nbsp;html>


  <meta>
  <title>监听方法watch的使用</title>
  <script></script>


  <p></p>
  <script>
    var vm = new Vue({
      el: "#root",
      data: { obj: {name: "zhaoolee", age: 12} , tel:6666666},
      template: `<p><p>姓名: {{obj.name}}
        <p>电话: {{tel}}
        <input type="text" v-model="obj.name">
        <input type="text" v-model="tel">`,
      watch: {
        obj: {
         handler(){
           console.log("obj被改变");
         },
          // 页面加载之初先执行一次handle
         immediate: true,
          // 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能)
         deep: true
        },
        "obj.name": {
          handler(){
            console.log("=>obj.name被改变");
          }
        },
        tel:{
          handler(){
            console.log("tel被改变");
          }
        }
      }
    })
  </script>

corresponds to an object, the key is the observation expression, and the value is the corresponding callback. The value can also be a method name, or an object containing options. Call $watch() for each key during instantiation;

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How the front-end transmits Json data to the backend

##How to convert the html fields in the data into HTML tags

What are the ways to pass json parameters using the Post method

The above is the detailed content of Detailed explanation of using Vue watch. For more information, please follow other related articles on the PHP Chinese website!