Vue 4.25

Vue

1.Vue概念

用于构建用户界面的渐进式JavaScript框架
渐进式：自底向上逐层应用，逐渐增加插件

2.特点

• 组件化模式，提高代码复用率，利于维护
• 声明式编码，无需直接操作DOM，提高开发效率
• 虚拟DOM+Diff算法，尽量复用DOM节点

3.入门案例

禁用开发者提示

	Vue.config.productionTip = false;

• 想让Vue工作必须创建一个Vue实例，传入一个配置对象，一对一
• 容器里的代码依然符合html规范，但混入了一些Vue语法
• 容器里的代码被称为Vue模板
• Vue实例和容器一一对应
• {{xxx}}需要写js表达式，且xxx自动读取到data中的所有属性
• data中数据改变，页面中用到该数据的地方也会自动更新
• 区分JS表达式和JS代码：
  1.表达式：生成一个值，放在需要值的地方
  2.JS代码（语句）：if(){}

4.模板语法

4.1插值语法

 <div id="root">
        <h1>hello,{{name}}</h1>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'zh',
            }
        })
    </script>

4.2指令语法

在href前加v-bind:，可以简写为冒号：
v-bind将后面引号内的内容当做表达式

 <div id="root">
        <a v-bind:href="url">去百度一下</a>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'zh',
                url: 'http://www.baidu.com'
            }
        })
    </script>

4.3插值语法和指令语法的使用

• 在标签体内用插值语法
• 涉及标签体属性用指令语法

5.数据绑定

• v-bind是单向数据绑定
• v-model双向数据绑定，只能应用于表单元素（输入类元素），有value值，可省略value和冒号

6.el和data的两种写法

el:

• el:‘#root’
• v.$mount(‘#root’)

data:

• 对象式
• 函数式：组件时会用，里面的this指向Vue实例对象，Vue管理的函数不能写成箭头函数，因为箭头函数没有自己的this

7.MVVM模型

• M：模型（model），对应data中的数据
• V：视图（view），模板
• VM：视图模型（viewmodel）：Vue实例对象
  data中所有的属性都出现在了vm身上
  vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用

8.数据代理

Object.defineProperty添加的属性不能枚举，即不能遍历。enumerable: true即可枚举，configurable:true 可被删除

	 Object.defineProperty(person, 'age', {
            value: 18
            enumerable: true //可枚举
            writable:true
            configurable:true  //可被删除
    get(){}   //读取age值时，get函数被调用
    set(value){}   //修改age值时，set函数被调用
        })

get()：当有人读取包含get的对象时，get会被调用，返回值作为对象的值
get什么时候调用：

• 初次读取对象时
• 所依赖的数据发生变化时

8.1概念

数据代理：通过一个对象代理另一个对象中属性的操作（读/写）

8.2基本原理

• 通过Object.defineProperty()把data对象中的所有属性添加到vm上
• 为每一个添加到vm上的属性指定一个getter和setter
• 在getter/setter内部操作（读/写）data中对应的属性

9.事件处理

9.1基本使用：

• 使用v-on:xxx或@xxx绑定事件，xxx为事件名
• 事件的回调配置在methods对象中，最终在vm上
• methods中配置的函数，不要用箭头函数，因为箭头函数没有this会指向window
• methods中配置的函数，this都指向vm或组件实例对象
• @click="demo"和@click="demo($event)"效果一致，但后者可传参

9.2事件修饰符

常见修饰符：

• prevent：阻止默认事件
• stop：阻止事件冒泡
• once：事件只触发一次
• capture：使用事件捕获模式
• self：只有event.target是当前操作的元素时才触发事件
• passive：事件的默认行为立即执行，无需等待事件回调执行完毕
  可以链式写法，如event.stop.prevent

9.3键盘事件

9.3.1常见按键别名：

• 回车 enter
• 删除 delete （捕获删除和退格）
• 退出 esc
• 空格 space
• 换行 tab （配合keydown使用）
• 上下左右
  未提供别名的按键，使用按键原始key值绑定，但要转换为kebab-case（短横线命名）

9.3.2系统修饰键：ctrl、alt、shift、meta

• 配合keyup使用：按下修饰键同时，再按下其他键，随后释放其他键，事件触发
  ctrl.y表示只有按下ctrl+y才触发
• 配合keydown使用：正常触发

9.3.3定制按键别名

Vue.config.keyCodes.自定义键名 = 键码

10.计算属性

• 定义：要使用的属性不存在，通过已有属性计算得来
• 原理：底层借助Object.defineproperty方法的getter和setter
• get什么时候调用：

初次读取对象时
所依赖的数据发生变化时

• 优势：内部存在缓存机制，效率高
• 注意：计算属性最终出现在vm上，直接读取使用即可。若要修改，必须使用set函数响应修改，且set中要引起计算时依赖的数据发生改变

简写

vm.fullName的值为fullName返回的值
只读不改时使用简写
完整：fullName:{get(){}}
简写：fullName (){} 当做get使用

11.监视属性

绑定事件的时候：@xxx=“yyy”,yyy可以写一些简单的语句

• 当监视属性变化时，回调函数自动调用
• 监视属性必须存在，才能监视
• 两种写法：
  new Vue时传入watch配置
  通过vm.$watch

 const vm = new Vue({
            isHot: true,
            watch: {
                isHot: {
                		 immediate：true， //初始化时调用一下handler
                    handler(newValue, oldValue) //isHot发生改变时调用
                    }
                }
        })

11.1深度监视

• Vue中的watch默认不监测对象内部值的改变（一层）
• 配置deep：true可以监测对象内部值改变（多层）
  备注：
• Vue自身可以监测内部值改变，但watch默认不可以
• 使用watch时根据数据的具体结果，决定是否采用深度监视

11.2监视简写

配置项中只有handler时可以简写

  watch: {
                isHot(newValue, oldValue) {
                console.log();
                }
         }

	vm.$watch('isHot',function(newValue,oldValue)

12.watch和computed的区别

• computed能完成的功能，watch都能完成
• watch能完成异步操作，computed不能
  注意：
• vue管理的函数写成普通函数
• 不被vue管理的函数（定时器回调函数、ajax回调函数）最好写成箭头函数，这样this指向的是vm或组件实例对象，而不是window

13.class绑定

字符串写法：适用于：样式的类名不确定，需要动态指定
v-bind:class — :class
数组写法：适用于：样式的个数和名字都不确定

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

对象写法：适用于：样式的个数和名字确定，但动态决定是否使用

<div>
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
</div>

data: {
  isActive: true,
  hasError: false
}

14.style绑定

对象写法：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组写法很少使用

15.条件渲染

• v-show：true显示
• v-if：flase隐藏，结构也消失
• v-else-if
• v-else
• v-if和v-else-if及v-else需要贴在一起，不能分隔
  切换频率高用show，频率低if
• 把一个 < template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 < template> 元素，不能和v-show一起

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

16.列表渲染

v-for：

• 展示列表数据
• 语法：v-for=“(item,index) in/of xxx” :key=“yyy”
• 可遍历：数组、对象、字符串（很少），指定次数（很少）

<ul id="example-1">
  <li v-for="item in items" :key="item.message">   //of也可以
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
}) 

Vue中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是没有问题的。

16.1列表过滤

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

16.2列表排序

new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, //0原顺序 1降序 2升序
					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:'男'}
					]
				},
				computed:{
					filPerons(){
						const arr = this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
						//判断一下是否需要排序
						if(this.sortType){
							arr.sort((p1,p2)=>{
								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
							})
						}
						return arr
					}
				}
			}) 

16.3Vue检测数据改变的原理

对象监测：

let data = {
				name:'zh',
				address:'北京',
			}

			//创建一个监视的实例对象，用于监视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
						}
					})
				})
			}

数组监测：
setter影响页面
原理：

• vue会监视data中所有层次的数据
• 如何监测对象中的数据？
  通过setter实现监视，且要在new Vue时就传入要监测的数据
  (1).对象中后追加的属性，Vue默认不做响应式处理
  (2).如需给后添加的属性做响应式，请使用如下API：

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

• 如何监测数组中的数据？
  通过包裹数组更新元素的方法实现，本质就是做了两件事：
  (1).调用原生对应的方法对数组进行更新。
  (2).重新解析模板，进而更新页面。
• 在Vue修改数组中的某个元素一定要用如下方法：
  1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
  2.Vue.set() 或 vm.$set()
• 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！

17.收集表单数据

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

18.过滤器（Vue3不支持）

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