回顧：
```
Object.defineProperty
let?obj?=?{
??a:10
}
let?a?=?10;
Object.defineProperty(obj,'a',{
??get(){
????//?攔截了?對(duì)于?obj對(duì)象a屬性?獲取的操作
????return?a;
??},
??set(val){
????//?攔截對(duì)于obj對(duì)象a?賦值的操作
????a?=?val;
??}
})
obj.a?=?20;
new一個(gè)?vue實(shí)例
??data:{
????a:{
??????a:{
????????b:{}
??????}
????}
??}
??vue?自動(dòng)遍歷（遞歸）,data屬性，將所有的?屬性都?放到?getter/setter（池），設(shè)置?任意一個(gè)數(shù)據(jù)，對(duì)于setter就會(huì)攔截到，通知?watcher?自動(dòng)去調(diào)用函數(shù)?render,生成?虛擬dom,跟上一次?已經(jīng)緩存的虛擬dom進(jìn)行比較（diff算法），得到最優(yōu)渲染方案，盡量較少dom操作
??問(wèn)題？
????1，對(duì)象，??對(duì)象如果是?動(dòng)態(tài)添加的?監(jiān)聽不了?（數(shù)據(jù)變化不會(huì)刷新）
????2，數(shù)組??arr[下標(biāo)]=值???arr.length?=?newLength
??????Vue.set()
??????this.$set(對(duì)象,屬性,值)
??????this.$set(數(shù)組,下標(biāo),值)
```
##?表單修飾符?修飾v-model
+?lazy
??將?v-model?由原來(lái)?input事件改為?change事件觸發(fā)
+?number
??將v-model綁定的值，自動(dòng)過(guò)濾成數(shù)字（按照parseFloat?順序解析）（如果需要開頭就是非數(shù)字字符，失去功能）
+?trim
??去除開頭結(jié)尾空格
##?ref??方便獲取dom
```
vue?盡量不要去操作dom，以數(shù)據(jù)驅(qū)動(dòng)
<div?ref="box">
<p?ref="op">
實(shí)例??this.$refs
??????{
????????box:div,?//div這個(gè)dom對(duì)象
????????op:?p?//p這個(gè)dom對(duì)象
??????}
????this.$refs['box']
????this.$refs.box
```
##?偵聽器?（監(jiān)控?數(shù)據(jù)變化，數(shù)據(jù)變化時(shí)，回調(diào)自動(dòng)觸發(fā)）
新增?watch屬性
什么時(shí)候用：?需要?監(jiān)聽一個(gè)數(shù)據(jù)變化，當(dāng)這個(gè)數(shù)據(jù)變化時(shí)，我需要做其他的操作
```
新增?watch屬性
let?vm?=?new?Vue({
??el:'xx',
??data:{
????msg:"a",
????obj:{
??????a:10,
??????b:20
????}
??},
??watch:{
????//?監(jiān)聽基本數(shù)據(jù)類型
????msg(newVal,oldVal){
????},
????//?監(jiān)聽對(duì)象屬性
????'obj.a'(newVal,oldVal){
????},
????//?監(jiān)聽對(duì)象
????obj:{
??????handler(newVal,oldVal){
??????},
??????deep:true?//深度監(jiān)聽
????}
??}
})
```
##?計(jì)算屬性
```
語(yǔ)法：
??新增?computed屬性
??{
????data:{
??????msg:'hello?world'
????},
????computed:{
??????msg2(){?//?寫法是?方法?編譯到實(shí)例上??是和?data中的屬性一樣的?值（不是函數(shù)）
????????return?this.msg.split('').reverse().join('');
??????}
????}
??}
??注意：
????計(jì)算屬性??名字?不能和?data（methods）中?已存在的?屬性??重名
????計(jì)算不要去修改?計(jì)算屬性的值??應(yīng)該去修改?計(jì)算屬性依賴的值
??如果需要修改計(jì)算屬性
??計(jì)算屬性?需要?使用?get和set的寫法
??{
????data:{
??????msg:'hello?world'
????},
????computed:{
??????msg2:{
????????get(){
??????????return?this.msg.split('').reverse().join('');
????????},
????????set(val){
???????????//?每一次修改??計(jì)算屬性時(shí)，set觸發(fā)，同時(shí)，修改的值，通過(guò)val傳入
???????????this.msg?=?val;
????????}
??????}
????}
??}
```
##?組件
理解網(wǎng)頁(yè)上?獨(dú)立?區(qū)域（每一個(gè)標(biāo)簽都可以理解為是一個(gè)組件）
vue組件??組件?也是?Vue的實(shí)例（不是顯式new?Vue）（new?Vue創(chuàng)建實(shí)例），實(shí)例有的方法組件都有
```
如何創(chuàng)建組件
??取決這個(gè)組件定義的哪里
??全局組件
????在任意其他的組件中?都可以使用
????Vue.component(組件名,{
??????template:?指定當(dāng)前組件的?視圖
??????data,
??????methods,
??????watch,
??????computed
????})
????eg:
???????let?CommonHead?=?{
????????template:`
??????????<div>
????????????<h1>我是公共的頭部{{title}}</h1>
????????????<h2>我是組件的副標(biāo)題</h2>
????????????{{?msg?}}
????????????{{?msg2?}}
????????????<button?@click="change">改變title</button>
??????????</div>
????????`,
????????data(){
??????????return?{
????????????title:"我是標(biāo)題",
????????????msg:'hello?world'
??????????}
????????},
????????methods:{
??????????change(){
????????????this.title?=?"我是另一個(gè)標(biāo)題"
??????????}
????????},
????????computed:{
??????????msg2(){
????????????return?this.msg.split('').reverse().join('')
??????????}
????????}
??????}
??????//?Vue.component('CommonHead',CommonHead);
??????Vue.component('common-head',CommonHead);
??局部組件
????在其他實(shí)例的?components屬性中注冊(cè)
????let?SubHead?=?{
??????template:`
????????<div>
??????????我是局部組件
????????</div>
??????`
????}
????let?CommonHead?=?{
??????template:`
????????<div>
??????????<h1>我是公共的頭部</h1>
??????????<sub-head></sub-head>
????????</div>
??????`,?
??????components:{
????????SubHead
??????}
????}
??注意：
????1，組件的data屬性必須是?函數(shù)?返回?對(duì)象(組件?需要復(fù)用，如果直接是對(duì)象，那么多次使用，使用的是同一個(gè)對(duì)象，)，函數(shù)返回對(duì)象（閉包），讓?組件在每一次使用的時(shí)候，都一個(gè)獨(dú)立空間
????2，組件的template?必須，只有一個(gè)根元素
????3，每個(gè)組件都有自己的作用域（data中數(shù)據(jù)只能在自己的template渲染，自己template中綁定方法，只能是自己這個(gè)組件methods中的）
```
