響應(yīng)式數(shù)據(jù)的說明

響應(yīng)式數(shù)據(jù): 把data中的數(shù)據(jù)掛到vm身上，vm身上的這個(gè)數(shù)據(jù)其實(shí)就是響應(yīng)式的

一旦數(shù)據(jù)發(fā)生了改變，頁面中的內(nèi)容也會(huì)跟著改變

動(dòng)態(tài)添加的數(shù)據(jù)是無效的以及$set的使用

• data中的數(shù)據(jù)一定要先聲明，再使用，動(dòng)態(tài)給對(duì)象添加的屬性不是響應(yīng)式的

<div id="app">    <p>{{person.name}}---{{person.age}}---{{person.gender}}</p></div><script src="vue.js"></script><script>    var vm = new Vue({        el: '#app',        data: {            person: {                name: 'zs',                age: 18            }        }    })</script>// 動(dòng)態(tài)給data中添加的數(shù)據(jù)是無效的// 在vue實(shí)例創(chuàng)建的時(shí)候，會(huì)把data中的數(shù)據(jù)綁定到vm上，所以data中的數(shù)據(jù)是響應(yīng)的// 但是動(dòng)態(tài)綁定的數(shù)據(jù)不是響應(yīng)是的。vm.person.gender = '男'

• 如果想要?jiǎng)討B(tài)綁定數(shù)據(jù)，并且是響應(yīng)式的,需要使用vm.$set方法

this.$set(this.person, 'gender', '男')

結(jié)論：

• 如果是對(duì)象，動(dòng)態(tài)給對(duì)象添加或者刪除一個(gè)屬性，vue是檢測不到的，所以不是響應(yīng)的，如果想用動(dòng)態(tài)添加的數(shù)據(jù)是響應(yīng)式，需要使用Vue.set(obj, key, value) vm.$set(obj, key ,value)

• 如果是數(shù)組，通過數(shù)組的下標(biāo)或者是數(shù)組的長度，vue也是檢測不到，所以操作也不是響應(yīng)式的

• 使用Vue.set方法

• 數(shù)組的變異的方法，這個(gè)方法會(huì)改變?cè)瓟?shù)組，能夠觸發(fā)vue的更新。

異步DOM更新以及$nextTick的說明

在vue中數(shù)據(jù)發(fā)生了改變，DOM中的數(shù)據(jù)也會(huì)跟著發(fā)生改變，但是這個(gè)過程是異步的

vue的數(shù)據(jù)發(fā)生改變之后，DOM不會(huì)立即更新，會(huì)等到下一次渲染工作執(zhí)行的時(shí)候才會(huì)更新DOM

目的：為了提高渲染的性能

clickFn () {    // 數(shù)據(jù)變化了， view中的內(nèi)容也要跟著變    this.msg = '你好啊，vue1'    this.msg = '你好啊，vue2'    this.msg = '你好啊，vue3'    this.msg = '你好啊，vue4'    this.msg = '你好啊，vue5'    // 為什么：DOM操作是非常消耗性能的，簡單DOM的操作能夠提升我們的性能，如果每次操作數(shù)據(jù)，都立即更新DOM，無疑性能會(huì)非常的低，所以vue中會(huì)等待數(shù)據(jù)都修改完成    let result = document.querySelector('p').innerHTML    console.log(result) // hello}

• $nextTick方法會(huì)在DOM更新之后執(zhí)行

 // 在實(shí)際開發(fā)中，有可能需要在數(shù)據(jù)改變之后，獲取到更新之后的DOM數(shù)據(jù)// 這個(gè)時(shí)候可以使用 $nextTick函數(shù)// 當(dāng)vue更新完DOM后，會(huì)自動(dòng)調(diào)用$nextTick函數(shù)，確保在這個(gè)函數(shù)中可以獲取到DOM結(jié)構(gòu)是最新的this.$nextTick(function() {    let result = document.querySelector('p').innerHTML    console.log(result) // 你好啊，vue5})