Shinkai005

2022/05/15阅读：49主题：红绯

尚硅谷Vue2.0+Vue3.0全套教程-笔记3

“
7点开始学14.5小时~笔记大概能覆盖10-12小时~剩下的看这个老师的react
”

[x] Vue深度监听原理,递归实现

*033-更新时一个问题

“
计算属性内容改变依旧不会触发更新,前面改变了本质依旧是修改了data内容.我试了没错~
”

代码

 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>人员列表</h2>
   <button @click="updateMei">更新马冬梅的信息</button>
   <ul>
    <li v-for="(p,index) of persons" :key="p.id">
     {{p.name}}-{{p.age}}-{{p.sex}}
    </li>
   </ul>
  </div>

  <script type="text/javascript">
   Vue.config.productionTip = false
   
   const vm = new Vue({
    el:'#root',
    data:{
     persons:[
      {id:'001',name:'马冬梅',age:30,sex:'女'},
      {id:'002',name:'周冬雨',age:31,sex:'女'},
      {id:'003',name:'周杰伦',age:18,sex:'男'},
      {id:'004',name:'温兆伦',age:19,sex:'男'}
     ]
    },
    methods: {
     updateMei(){
      // this.persons[0].name = '马老师' //奏效
      // this.persons[0].age = 50 //奏效
      // this.persons[0].sex = '男' //奏效
      // this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
      this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
     }
    }
   }) 

  </script>
    </body>

这节课内容上节课我纠结半天, 最后知道解决办法了但是不知道原理~

宏观上说本节知识点:

vue可以检测到深度的改变---开发者工具体现.

“
这句话我现在存疑了.....尤大说过检测不到

应该只是单纯的打开开发者工具,然后开发者工具遍历了vm上的内容显示而已.检测不到前后的变化.
”
- 先改变数据再打开开发者工具, 会显示this.persons[0]改变后的数据.
- 先打开开发者工具不会
但是vue不会去因为深度变化而进行模板的重新解析编译.

“
后面附上,vue数据更新视图不更新的7种情况.加原因.
”

*034-Vue监测数据改变的原理_对象

代码

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>学校名称：{{name}}</h2>
   <h2>学校地址：{{address}}</h2>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    name:'尚硅谷',
    address:'北京',
    student:{
     name:'tom',
     age:{
      rAge:40,
      sAge:29,
     },
     friends:[
      {name:'jerry',age:35}
     ]
    }
   }
  })
 </script>

这个原理和watch原理不一样的.

watch是抛给开发者的api, 并不是vue内部使用的原理.

那么watch怎么实现的? vue内部使用的原理是什么?

原理

先看数据代理

那么这个隐式的第一步 加工做了什么呢?

注意看: 每一个data数据都加了 getter 和 setter, 这样每次setter时候是不是就可以触发一整段流程? 然后再给值.

这一整段流程就是生成虚拟dom diff比较渲染生成新的dom

但是并不是这么简单的~如果这么简单vue怎么可能三大框架呢~ 继续看

模拟数据检测代码:

<body>
  <script type="text/javascript" >

   let data = {
        name: '尚硅谷',
        address: '北京',
        description: {
          father: {
            uncle: 'uncle',
          },
          mother: {
            aunt: 'aunt',
          },
        },
      };

   //创建一个监视的实例对象，用于监视data中属性的变化
   const obs = new Observer(data)  
   console.log(obs) 

   //准备一个vm实例对象
   let vm = {}
   vm._data = data = obs

   function Observer(obj){
    //汇总对象中所有的属性形成一个数组
    const keys = Object.keys(obj)
    //遍历
    keys.forEach((k)=>{
     Object.defineProperty(this,k,{
      get(){
       return obj[k]
      },
      set(val){
       console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
       obj[k] = val
      }
     })
    })
   }
   
   


  </script>
 </body>

上面用到了观察者模式,代理模式

“
vue真的是狂用代理模式.要习惯这种思维方式.

题外话:js设计模式建议大家啃一遍
”

“
vue递归遍历也是很常用,遍历树组件.
”

上面代码就是vue解析对象的原理

“
老师没写递归调用,我也补不上,尽力了能力有限

搞了好久

希望后面有
”

还是放心不下...回来写完了代码如下

可以看到里面数据也被劫持了~

但是多了会溢出,我打开vue看也是啊...但是人家不溢出..

035-Vue.set()方法

代码

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h1>学校信息</h1>
   <h2>学校名称：{{school.name}}</h2>
   <h2>学校地址：{{school.address}}</h2>
   <h2>校长是：{{school.leader}}</h2>
   <hr/>
   <h1>学生信息</h1>
   <button @click="addSex">添加一个性别属性，默认值是男</button>
   <h2>姓名：{{student.name}}</h2>
   <h2 v-if="student.sex">性别：{{student.sex}}</h2>
   <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
   <h2>朋友们</h2>
   <ul>
    <li v-for="(f,index) in student.friends" :key="index">
     {{f.name}}--{{f.age}}
    </li>
   </ul>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    school:{
     name:'尚硅谷',
     address:'北京',
    },
    student:{
     name:'tom',
     age:{
      rAge:40,
      sAge:29,
     },
     friends:[
      {name:'jerry',age:35},
      {name:'tony',age:36}
     ]
    }
   },
   methods: {
    addSex(){
     // Vue.set(this.student,'sex','男')
     this.$set(this.student,'sex','男')
    }
   }
  })
 </script>

“
直接往vue实例里写东西无法触发响应式
”

“
注意写法
”

这里复习下数据代理

vm._data.a===vm.a ===data.a(data.a直接获取不到)

看一下这个报错

“
这个意思是不能把响应式属性添加到vue实例,或者根数据对象也就是data上 _data上
”

“
Vue.set的第一个参数不能是vm
”

*036-Vue监测数据改变原理_数组

代码:

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h1>学校信息</h1>
   <h2>学校名称：{{school.name}}</h2>
   <h2>学校地址：{{school.address}}</h2>
   <h2>校长是：{{school.leader}}</h2>
   <hr/>
   <h1>学生信息</h1>
   <button @click="addSex">添加一个性别属性，默认值是男</button>
   <h2>姓名：{{student.name}}</h2>
   <h2 v-if="student.sex">性别：{{student.sex}}</h2>
   <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
   <h2>爱好</h2>
   <ul>
    <li v-for="(h,index) in student.hobby" :key="index">
     {{h}}
    </li>
   </ul>
   <h2>朋友们</h2>
   <ul>
    <li v-for="(f,index) in student.friends" :key="index">
     {{f.name}}--{{f.age}}
    </li>
   </ul>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    school:{
     name:'尚硅谷',
     address:'北京',
    },
    student:{
     name:'tom',
     age:{
      rAge:40,
      sAge:29,
     },
     hobby:['抽烟','喝酒','烫头'],
     friends:[
      {name:'jerry',age:35},
      {name:'tony',age:36}
     ]
    }
   },
   methods: {
    addSex(){
     // Vue.set(this.student,'sex','男')
     this.$set(this.student,'sex','男')
    }
   }
  })
 </script>

引出问题

vue对数组的操作和对象不同,对象里每一项都会生成getter,setter.

js数组也是对象 ==> 那么数组的index对应对象的key ==> 因此顺着这个逻辑,应该数组的每一个index都会生成getter和setter.但是没有.证明如下图

因此是不是,对数组的某一项进行操作,不会触发响应式?也就是vue不认

Vue是怎么检测数组变化的呢?

“
7个影响数组变化的方法\

push, pop, shift, unshift

splice, sort, reverse
”

Vue是通过检测这些数组方法来判定数组变化的,那么其他的方法如何改变呢?

其实上面代码已经用过了,用arr去接受返回值,即可.因为return回来的数组和原数组的地址不一样,因此会使用基本类型的判定规则进行判定~其实就是一串2进制数字地址

vue是如何能检测这些数组方法来检测数组变化呢?

“
重写了push方法,视频里用的是包装,先引用原Array.prototype.push然后执行创建虚拟dom那一套流程
”

037-总结Vue监视数据

代码

<body>


  <!-- 准备好一个容器-->
  <div id="root">
   <h1>学生信息</h1>
   <button @click="student.age++">年龄+1岁</button> <br/>
   <button @click="addSex">添加性别属性，默认值：男</button> <br/>
   <button @click="student.sex = '未知' ">修改性别</button> <br/>
   <button @click="addFriend">在列表首位添加一个朋友</button> <br/>
   <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
   <button @click="addHobby">添加一个爱好</button> <br/>
   <button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
   <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
   <h3>姓名：{{student.name}}</h3>
   <h3>年龄：{{student.age}}</h3>
   <h3 v-if="student.sex">性别：{{student.sex}}</h3>
   <h3>爱好：</h3>
   <ul>
    <li v-for="(h,index) in student.hobby" :key="index">
     {{h}}
    </li>
   </ul>
   <h3>朋友们：</h3>
   <ul>
    <li v-for="(f,index) in student.friends" :key="index">
     {{f.name}}--{{f.age}}
    </li>
   </ul>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    student:{
     name:'tom',
     age:18,
     hobby:['抽烟','喝酒','烫头'],
     friends:[
      {name:'jerry',age:35},
      {name:'tony',age:36}
     ]
    }
   },
   methods: {
    addSex(){
     // Vue.set(this.student,'sex','男')
     this.$set(this.student,'sex','男')
    },
    addFriend(){
     this.student.friends.unshift({name:'jack',age:70})
    },
    updateFirstFriendName(){
     this.student.friends[0].name = '张三'
    },
    addHobby(){
     this.student.hobby.push('学习')
    },
    updateHobby(){
     // this.student.hobby.splice(0,1,'开车')
     // Vue.set(this.student.hobby,0,'开车')
     this.$set(this.student.hobby,0,'开车')
    },
    removeSmoke(){
     this.student.hobby = this.student.hobby.filter((h)=>{
      return h !== '抽烟'
     })
    }
   }
  })
 </script>

笔记

Vue监视数据的原理：

vue会监视data中所有层次的数据。

如何监测对象中的数据？

通过setter实现监视，且要在newVue时就传入要监测的数据。

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

“
Vue.set(target，propertyName/index，value)或vm.$set(target，propertyName/index，value)
”

如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法：
- 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- Vue.set()或vm. set()不能给vm或vm的根数据对象添加属性！！！

“
在vue中如果出现这种写法 this.persons[0] = ... 这种会错
”

038-收集表单数据

代码:

<body>
<!-- 
   收集表单数据：
     若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
     若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
     若：<input type="checkbox"/>
       1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
       2.配置input的value属性:
         (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
         (2)v-model的初始值是数组，那么收集的的就是value组成的数组
     备注：v-model的三个修饰符：
         lazy：失去焦点再收集数据
         number：输入字符串转为有效的数字
         trim：输入首尾空格过滤
-->

    <!-- 准备好一个容器-->
    <div id="root">
      <form @submit.prevent="demo">
        <fieldset>
          <legend>test</legend>
          <div class="Account">
            <label for="account"
              >账号:<input type="text" id="account" v-model.trim="account"
            /></label>
          </div>
          <div>
           <label>年龄<input type="number" v-model.number="age"></label>
          </div>
          <div class="Password">
            <label for="password">密码:</label
            ><input type="password" id="password" v-model="password" />
          </div>
          <div class="Sex">
            <label
              >性别: <input type="radio" value="男" name="sex" v-model="sex" />男
              <input type="radio" value="女" name="sex" v-model="sex"/>女
            </label>
          </div>
          <div class="Hobby">
            爱好:
            <label><input type="checkbox" v-model="hobby" value="smoking" />抽烟 </label>
            <label><input type="checkbox" v-model="hobby" value="drinking" />喝酒</label>
            <label><input type="checkbox" v-model="hobby" value="perm"  />烫头</label>
            
          </div>
          <div class="Campus">
            <label
              >所属校区:
              <select v-model="campus" >
                <option value="0">请选择校区</option>
                <option value="1">北大</option>
                <option value="2">清华</option>
                <option value="3">北理工</option>
              </select>
            </label>
          </div>
          <div class="MoreInformation">
            <label
              >其他信息: <textarea name="" id="" cols="30" rows="10" v-model.lazy="moreInformation" ></textarea>
            </label>
          </div>
          <div>
            <input type="checkbox" name="" id="" v-model="agree" />
            阅读并接受<a href="#">用户协议</a>
          </div>
          <div>
           <button>submit</button>
          </div>
        </fieldset>
      </form>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        account: '',
        password: '',
        sex: '',
        hobby: [],
        campus: '',
        moreInformation: '',
        agree:false,
        age:0
      },
      methods: {
        demo(){
          console.log('表单提交了',JSON.stringify(this._data))
        }
      },
    });
  </script>

几个注意点:

账号密码是有value值的,只要输入就有,因此v-model直接绑定即可

性别因为没有输入框,因此得写value属性

最后如果v-model是字符串,那么就是收集的checked的true/false
form内的button默认会submit 也就是type类型是submit

笔记:

收集表单数据：

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

若：<input type="checkbox"/>

             1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
             2. 配置input的value属性:
                              1. v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
                              2.  v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤

039-过滤器

代码:

<html>
 <head>
  <meta charset="UTF-8" />
  <title>过滤器</title>
  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript" src="../js/dayjs.min.js"></script>
 </head>
 <body>

  <!-- 准备好一个容器-->
  <div id="root">
   <h2>显示格式化后的时间</h2>
   <!-- 计算属性实现 -->
   <h3>现在是：{{fmtTime}}</h3>
   <!-- methods实现 -->
   <h3>现在是：{{getFmtTime()}}</h3>
   <!-- 过滤器实现 -->
   <h3>现在是：{{time | timeFormater}}</h3>
   <!-- 过滤器实现（传参） -->
   <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
   <h3 :x="msg | mySlice">尚硅谷</h3>
  </div>

  <div id="root2">
   <h2>{{msg | mySlice}}</h2>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false
  //全局过滤器
  Vue.filter('mySlice',function(value){
   return value.slice(0,4)
  })
  
  new Vue({
   el:'#root',
   data:{
    time:1621561377603, //时间戳
    msg:'你好，尚硅谷'
   },
   computed: {
    fmtTime(){
     return dayjs(this.time).format('YYYY年MM月DD日 HH:0mm:ss')
    }
   },
   methods: {
    getFmtTime(){
     return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
    }
   },
   //局部过滤器
   filters:{
    timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
     // console.log('@',value)
     return dayjs(value).format(str)
    }
   }
  })

  new Vue({
   el:'#root2',
   data:{
    msg:'hello,atguigu!'
   }
  })
 </script>
</html>

用的插件是day.js

moment.js不在维护

过滤器vue3没了~不详细写了

笔记:

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法：
1.注册过滤器：Vue.filter(name,cal1back）或 new Vue {filters:（})
2.使用过滤器：{{ xxx ！过滤器名了} 或 v-bZnd:属性二"xxx！过滤器名备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据

附录

1. Vue 无法检测实例被创建时不存在于 `data` 中的 property

原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

场景：

var vm = new Vue({
  data:{},
  // 页面不会变化
  template: '<div>{{message}}</div>'
})
vm.message = 'Hello!' // `vm.message` 不是响应式的

解决办法：
var vm = new Vue({
  data: {
    // 声明 a、b 为一个空值字符串
    message: '',
  },
  template: '<div>{{ message }}</div>'
})
vm.message = 'Hello!'

2. Vue 无法检测对象 property 的添加或移除

   
    “

    原因：官方 - 由于 JavaScript（ES5） 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
”
   
场景：
var vm = new Vue({
  data:{
    obj: {
      id: 001
    }
  },
  // 页面不会变化
  template: '<div>{{ obj.message }}</div>'
})

vm.obj.message = 'hello' // 不是响应式的
delete vm.obj.id       // 不是响应式的

解决办法：
// 动态添加 - Vue.set
Vue.set(vm.obj, propertyName, newValue)

// 动态添加 - vm.$set
vm.$set(vm.obj, propertyName, newValue)

// 动态添加多个
// 代替 Object.assign(this.obj, { a: 1, b: 2 })
this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })

// 动态移除 - Vue.delete
Vue.delete(vm.obj, propertyName)

// 动态移除 - vm.$delete
vm.$delete(vm.obj, propertyName)

3. Vue 不能检测通过数组索引直接修改一个数组项

   
    “

    原因：官方 - 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化；尤雨溪 - 性能代价和获得用户体验不成正比。
”
   
场景：
var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的

解决办法：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// vm.$set
vm.$set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

拓展：Object.defineProperty() 可以监测数组的变化

   
    “

    Object.defineProperty() 可以监测数组的变化。但对数组新增一个属性（index）不会监测到数据变化，因为无法监测到新增数组的下标（index），删除一个属性（index）也是。
”
   
场景：
var arr = [1, 2, 3, 4]
arr.forEach(function(item, index) {
    Object.defineProperty(arr, index, {
    set: function(value) {
      console.log('触发 setter')
      item = value
    },
    get: function() {
      console.log('触发 getter')
      return item
    }
  })
})
arr[1] = '123'  // 触发 setter
arr[1]          // 触发 getter 返回值为 "123"
arr[5] = 5      // 不会触发 setter 和 getter

4. Vue 不能监测直接修改数组长度的变化

   
    “

    原因：官方 - 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化；尤雨溪 - 性能代价和获得用户体验不成正比。
”
   
场景：
var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items.length = 2 // 不是响应性的

解决办法：
vm.items.splice(newLength)

5. 在异步更新执行之前操作 DOM 数据不会变化

   
    “

    原因：Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
”
   
场景：
<div id="example">{{message}}</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
vm.$el.style.color = 'red' // 页面没有变化

解决办法：
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
//使用 Vue.nextTick(callback) callback 将在 DOM 更新完成后被调用
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
  vm.$el.style.color = 'red' // 文字颜色变成红色
})

拓展：异步更新带来的数据响应的误解
<!-- 页面显示：我更新啦！ -->
<div id="example">{{message.text}}</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: {},
  }
})
vm.$nextTick(function () {
  this.message = {}
  this.message.text = '我更新啦！'
})

上段代码中，我们在 data 对象中声明了一个 message 空对象，然后在下次 DOM 更新循环结束之后触发的异步回调中，执行了如下两段代码：
this.message = {};
this.message.text = '我更新啦！'

到这里，模版更新了，页面最后会显示 我更新啦！。
模板更新了，应该具有响应式特性，如果这么想那么你就已经走入了误区。
一开始我们在 data 对象中只是声明了一个 message 空对象，并不具有 text 属性，所以该 text 属性是不具有响应式特性的。
但模板切切实实已经更新了，这又是怎么回事呢？
那是因为 Vue.js 的 DOM 更新是异步的，即当 setter 操作发生后，指令并不会立马更新，指令的更新操作会有一个延迟，当指令更新真正执行的时候，此时 text 属性已经赋值，所以指令更新模板时得到的是新值。

   
    “

    模板中每个指令/数据绑定都有一个对应的 watcher 对象，在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时，会触发 watcher 重新计算 ，也就会导致它的关联指令更新 DOM。
”
   

   
    
    
     img
    
   
具体流程如下所示：

   

    
     
      执行 this.message = {}; 时， setter 被调用。
     
    
     
      Vue.js 追踪到 message 依赖的 setter 被调用后，会触发 watcher 重新计算。
     
    
     
      this.message.text = '我更新啦！'; 对 text 属性进行赋值。
     
    
     
      异步回调逻辑执行结束之后，就会导致它的关联指令更新 DOM，指令更新开始执行。
     
   
所以真正的触发模版更新的操作是 this.message = {};这一句引起的，因为触发了 setter，所以单看上述例子，具有响应式特性的数据只有 message 这一层，它的动态添加的属性是不具备的。

   
    “

    对应上述第二点 - Vue 无法检测对象 property 的添加或移除
”
   
6. 循环嵌套层级太深，视图不更新？
看到网上有些人说数据更新的层级太深，导致数据不更新或者更新缓慢从而导致试图不更新？
由于我没有遇到过这种情况，在我试图重现这种场景的情况下，发现并没有上述情况的发生，所以对于这一点不进行过多描述（如果有人在真实场景下遇到这种情况留个言吧）。
针对上述情况有人给出的解决方案是使用强制更新：

   
    “

    如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。
”
   
vm.$forceUpdate()

7. 拓展：路由参数变化时，页面不更新（数据不更新）
拓展一个因为路由参数变化，而导致页面不更新的问题，页面不更新本质上就是数据没有更新。

   
    “

    原因：路由视图组件引用了相同组件时，当路由参会变化时，会导致该组件无法更新，也就是我们常说中的页面无法更新的问题。
”
   
场景：
<div id="app">
  <ul>
    <li><router-link to="/home/foo">To Foo</router-link></li>    
    <li><router-link to="/home/baz">To Baz</router-link></li>    
    <li><router-link to="/home/bar">To Bar</router-link></li>    
  </ul>    
  <router-view></router-view>
</div>
const Home = {
  template: `<div>{{message}}</div>`,
  data() {
    return {
      message: this.$route.params.name
    }
  }
}

const router = new VueRouter({
  mode:'history',
    routes: [
    {path: '/home', component: Home },
    {path: '/home/:name', component: Home }
  ]
})

new Vue({
  el: '#app',
  router
})

上段代码中，我们在路由构建选项 routes 中配置了一个动态路由 '/home/:name'，它们共用一个路由组件 Home，这代表他们复用 RouterView 。
当进行路由切换时，页面只会渲染第一次路由匹配到的参数，之后再进行路由切换时，message 是没有变化的。
解决办法：

   
    “

    解决的办法有很多种，这里只列举我常用到几种方法。
”
   

   

    
     
      通过 watch 监听 $route 的变化。

      const Home = {
  template: `<div>{{message}}</div>`,
  data() {
    return {
      message: this.$route.params.name
    }
  },
  watch: {
       '$route': function() {
       this.message = this.$route.params.name
    }
    }
}
...
new Vue({
  el: '#app',
  router
})


     
    
     
      给 <router-view> 绑定 key 属性，这样 Vue 就会认为这是不同的 <router-view>。

      
       “ 
       弊端：如果从 /home 跳转到 /user 等其他路由下，我们是不用担心组件更新问题的，所以这个时候 key 属性是多余的。
 ”
      

      <div id="app">
  ...
  <router-view :key="key"></router-view>
</div>


     
   
原文来自: 破晓L segmentfault 不能放外链理解一下~/a/1190000022772025 前面

分类：

前端

标签：

JavaScript

作者介绍

Shinkai005

公众号:深海笔记Shinkai

尚硅谷Vue2.0+Vue3.0全套教程-笔记3

*033-更新时一个问题

代码

宏观上说本节知识点:

*034-Vue监测数据改变的原理_对象

代码

原理

模拟数据检测代码:

035-Vue.set()方法

代码

*036-Vue监测数据改变原理_数组

代码:

引出问题

Vue是怎么检测数组变化的呢?

vue是如何能检测这些数组方法来检测数组变化呢?

037-总结Vue监视数据

代码

笔记

Vue监视数据的原理：

038-收集表单数据

代码:

几个注意点:

笔记:

039-过滤器

代码:

笔记:

附录

1. Vue 无法检测实例被创建时不存在于 data 中的 property

2. Vue 无法检测对象 property 的添加或移除

3. Vue 不能检测通过数组索引直接修改一个数组项

拓展：Object.defineProperty() 可以监测数组的变化

4. Vue 不能监测直接修改数组长度的变化

5. 在异步更新执行之前操作 DOM 数据不会变化

拓展：异步更新带来的数据响应的误解

6. 循环嵌套层级太深，视图不更新？

7. 拓展：路由参数变化时，页面不更新（数据不更新）

Shinkai005

1. Vue 无法检测实例被创建时不存在于 `data` 中的 property