Shinkai005

V1

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内部使用的原理是什么?

原理

  • 先看数据代理
image-20220515075553281
image-20220515075553281

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

image-20220515075926160
image-20220515075926160

注意看: 每一个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解析对象的原理

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

搞了好久

希望后面有

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

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

image-20220515104819808
image-20220515104819808

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

image-20220515114857053
image-20220515114857053

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实例里写东西无法触发响应式

image-20220515120502818
image-20220515120502818
image-20220515120527541
image-20220515120527541

注意写法

这里复习下数据代理

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

  • 看一下这个报错
image-20220515121611058
image-20220515121611058

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

image-20220515121827682
image-20220515121827682

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.但是没有.证明如下图

image-20220515143158053
image-20220515143158053

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

image-20220515143255887
image-20220515143255887

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

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

push, pop, shift, unshift

splice, sort, reverse

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

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

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

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

image-20220515145039181
image-20220515145039181

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直接绑定即可
image-20220515163234297
image-20220515163234297
  • 性别因为没有输入框,因此得写value属性
image-20220515163357672
image-20220515163357672
  • 最后如果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: {
      id001
    }
  },
  // 页面不会变化
  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: 1b2 })
this.obj = Object.assign({}, this.obj, { a1b2 })

// 动态移除 - 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 = [1234]
arr.forEach(function(item, index{
    Object.defineProperty(arr, index, {
    setfunction(value{
      console.log('触发 setter')
      item = value
    },
    getfunction({
      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.thenMutationObserversetImmediate,如果执行环境不支持,则会采用 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
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 是没有变化的。

解决办法:

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

  1. 通过 watch 监听 $route 的变化。

    const Home = {
      template`<div>{{message}}</div>`,
      data() {
        return {
          messagethis.$route.params.name
        }
      },
      watch: {
           '$route'function({
           this.message = this.$route.params.name
        }
        }
    }
    ...
    new Vue({
      el'#app',
      router
    })
  2. <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
V1

公众号:深海笔记Shinkai