Vue P17-54

18、计算属性

示例：实现姓名的联动效果

可以用插值语法、method {{func()}} 这里必须有 （）表示返回值

在事件处理中，@click=“func1” 有没有无所谓

computed的计算属性和data中的属性都在vm中，但vm._data里只有后者。

computed里的this是vm，可用this.name读data中的数

没有真正的值，是被已有属性算出来的

get()什么时候被调用？

1、初次读取fullName时； 2、所依赖的数据发生变化时

set不是必须写的，但若要被修改，set中要引起依赖的是数据发生变化

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

全写：

fullName{

​ get(){}

​ set(){}

}

当只考虑get，不用set时，才能用简写

fullName(){ 但不是函数，使用时{{fullName}}没有（）

​ return xxxxx;

}

21、监视属性

vscode插件：vue3 snippets （片段） 作者：hollowtree

模板里不能出现this

@xxxx=“yyy” yyy可以写一些简单的语句

watch:{

​ isHot:{ # key

​ handler(newValue, oldValue){ # 当ishot发生改变时

}

}

}

immediate默认是false，如果是true，即使不变化，初始化也调用

正常属性、计算属性都可监视

监视的两种写法：1、new Vue时传入watch配置 2、通过vm.$watch。

后者vm.$watch(‘ishot’😃 要加引号

当被监视的属性变化时，回调函数自动调用handler

23、深度监视

要求监视 number.a 不要number.b。 只前者变，才回调

’number.a‘ 监视多级结构中某个属性的变化

若监视 number，a变/b变，不会回调，除非换一个新对象 {a=6, b=8}

使用deep=true

1、vue中的watch默认不监测对象内部值得改变，一层

2、配置deep，true可以监测对象内部值改变，多层

PS

1、vue自身可以检测对象内部值的改变，但vue提供的watch默认不可以！

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

简写：当配置项只有handler时，

isHot(newValue, oldValue){

}

vm.$watch(isHot,(newValue, oldValue){ 不能用箭头

})

25、watch对比computed

computed依靠返回值，不能异步，如延时

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

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

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

2、不被vue管理的函数，如定时器的回调函数，ajax的回调函数，promise回调等，最好写成箭头函数，这样this的指向才是vm或组件实例对象

26、绑定class样式

1、字符串写法，适用于：样式的类名不确定，需要动态指定 :class='a'

vm.arr.shift() 移除数组的第一个元素，vm.push

2、数组写法，适用于：要绑定的样式个数不确定，名字也不确定

3、对象写法， :class=classObj，个数确定，名字确定，但要动态决定用不用

27、绑定style样式

font-size ----> fontSize 改为驼峰写法

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

写对象、数组写法，数组较少用， styleArr:[{},{}]

28、条件渲染

v-show 节点在通过 display=None 控制，未被转移，仅样式被隐藏掉，适用于频率高的

v-if v-else-if v-else 一起使用时，结构不能被打断，适用于频率低的场景，特点：不展示的DOM元素之间被移除

template 特点，不像div一样，只是有个包裹作用，不影响效果，但只能用 v-if

使用 v-if 时，元素可能无法获取到，使用 v-show 一定可以获取到

29、列表渲染

v-for

<ul><li v-for="(p,index) in persons :key="index>{{p.name}}-{{p.age}}<li>
</ul>

可以遍历数组、对象、字符串，或者指定数字（类似于python中的range）

1、默认index作为key，但可能会引发问题：

1.1 若对数据进行：逆序添加、逆序删除等破坏顺序操作；会产生没有必要的真实DOM更新

=>界面效果没有问题，但效率低

1.2 如果结构中还包括输入类的DOM，会产生错误DOM更新

=>界面有问题

基于虚拟DOM对比策略，作用过程：

刚开始：根据数据生成虚拟DOM—>将虚拟DOM转为真实DOM上

更新后：根据新数据生成虚拟DOM—>对比…

找到key为0的数据，文件节点和input标签对比，发现前者不一样，后者一样。直接替换使用。

2、id作为key,最好使用数据的唯一标识作为key，如id，身份证号，手机号等唯一值

31、列表过滤

p.indexof(‘val’) 存在则返回位置索引，不存在返回-1；如果val是空的’ '，结果是0，不是-1

//#endregion 折叠某段代码

可以由computed/watch实现

37、总结vue监视数据

1、vue会监听data中所有层次的数据

2、如何检测对象中的数据？

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

​ 2.2 如需给后添加的属性做响应式，请使用如下API：

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

​ 或 this.$set(target, propertyName/index, value)

3、如何检测数组中的数据？

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

​ 3.1 调用原生对应的方法对数据进行更新

​ 3.2 重新解析模板，进而更新页面

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

​ 4.1 使用这些API

push 后面进入  
pop 最后删除
shift 第一个删除
unshift 第一个添加
splice 指定位置
sort 排序
reverse 反转

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

vm.set(vm.student, ‘age’, 15)

38、收集表单数据

若 <input type="text"/>，则v-model收集的是value值，用户输入的就是value值

若 <input type="ratio"/>，则v-model收集的是value值，且要给标签配置value值

若 <input type="checkbox"/>，则：

1、没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)

2、配置input的value属性

​ (1)v-model 的初始值是非数组，那么也是布尔值

​ (2)v-model 的初始值是数组，那么收集的就是value组成的数组

备注：v-model三大修饰符：

lazy 失去焦点后再收集数据

number 输入字符串转为有效的数字

trim 输入首位空格过滤

39、过滤器

比如：时间格式化。

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

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

2、使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性="xxx | 过滤器名"单向绑定，双向绑定v-model不可以

备注：1、过滤器也可以接收额外参数，多个过滤器也可以串联，“value | filter1 | filter2” filter2不会直接处理value，而是处理filter1处理后的值

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

40、v-text

内置指令，作用：向其所在的节点中渲染文本内容

与插值语法的区别是：v-text会替换掉节点中的内容，{{xxx}}则不会

v-on 事件监听

41、v-html

可以识别html结构，但有安全性问题，比如说cookie泄露

42、v-cloak

没有值。

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

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

43、v-once

初次渲染后，就视为静态内容了。以后数据的改变，不会引起v-once结构的更新

44、v-pre

跳过其所在节点的编译过程，加快编译

47、自定义指令总结：

一、定义语法

1、局部指令

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

回调函数里面的参数是 （element, bindings）

2、全局指令

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

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

1、bind 指令与元素成功绑定时调用

2、inserted 指令所在元素被插入页面时调用

3、update 指令所在模板结构被重新解析时调用

三、备注

1、指令定义时不加v-，但在使用时要加v-

2、指令名如果是多个单词，要使用kebab-case命名，不要用kebabCase命令

52、生命周期总结

8个钩子函数

语句后加debugger; 进行调试

1、beforeCreated 无法通过vm访问data中的数据。

2、初始化数据监测，数据代理。created可以通过vm访问data中的数据。

3、beforeMount页面呈现的是未编译的DOM。

解析模板，生成虚拟DOM（内存中），但页面还不能显示解析好的数据

4、**重要关键。**mounted：发送ajax请求，启动定时器，绑定自定义事件，订阅消息等初始化操作。

对DOM的操作有效，但尽可能避免，不要背叛，好不容易加载好了。

mounted，挂载，只第一次，之后页面再更新就是update了。

类似于检查身体的各项指标。页面显示经vue编译后的结果。

虚拟DOM转为真实DOM。

5、beforeUpdate

6、updated

7、**重要关键。**beforeDestroy：清楚定时器，解绑自定义事件，取消订阅消息等收尾工作

使用vm.$destroy完全销毁一个实例，清理它与其他实例的连接，解绑它的全部指令及事件监听器（自定义事件）

像已经和DOM绑定的事件，如@click之类，无法销毁。

类似于交代后事。

eg.消除定时器。clearInterval(this.timer) vm的数据可变，但页面不会再更新了

8、destroyed。

关于销毁Vue实例：

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

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

3、一般不会在beforeDestroy中操作数据，因为即便操作数据，也不会再出发更新流程了

54、组件介绍

vue使用组件的三大步骤：

一、定义组件，创建组件

使用Vue.extend(options)创建，其中options和new Vue(options)传入的几乎一样，区别如下：

1、el不要写。因为最终的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

2、data必须写成函数，避免组件被复用时，数据存在应用关系。

备注：使用template可以配置组件结构，但是不能作为根标签，根元素

二、注册组件

1、局部注册，new Vue时，传入components选项

2、全局注册，靠Vue.component(‘组件名’，组件)

三、使用组件，写组件标签