Vue知识总结

Posted 2020-11-24 abdm-989

vue知识点总结

1.vue生命周期

什么是vue的生命周期？
Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程，我们称这是Vue的生命周期
vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易形成好的逻辑
Vue生命周期总共有几个阶段？
它可以总共分为8个阶段：创建前/后,载入前/后，更新前/后，销毁前/销毁后
第一次页面加载会触发那几个钩子？
第一次页面加载时会触发beforeCreate,created,beforeMount,mounted
DOM渲染在哪个周期中就已经完成？
DOM渲染在mounted中就已经完成了
每个生命周期适合那些场景？
生命周期钩子的一些使用方法：
beforecreate:可以在加个loading事件，在加载实例是触发
created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted:挂载元素，获取到dom节点
updated:如果对数据统一处理，在这里写上相应函数
beforeDestroy:可以一个确认停止事件的确认框
nextTick:更新数据后立即操作dom

2.v-show与v-if的区别

v-show是css切换，v-if是完整的销毁和重新创建
使用频繁切换时用v-show,运行时较少改变时用v-if
V-if=’false’v-if是条件渲染，当false的时候不会渲染
使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成
v-show则是不管值是为true还是false，html元素都会存在，只是css中的display显示或隐藏
v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

3.开发中常用的指令有哪些

v-model:一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
v-html：更新元素的innerHTML
v-show与v-if：条件渲染，注意二者区别
v-on:click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数v-for：基于源数据多次渲染元素或模板v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM
语法v-bind:title=”msg”简写：title=”msg”

4.绑定class的数组用法

对象方法v-bind:class=”{‘orange’:isRipe, ’green’:isNotRipe}”
数组方法v-bind:class=”[class1,class2]‘’
行内v-bind:style=”{color:color,fontSize:fontSize+’px’}”

5.路由跳转方式

1.router-link标签会渲染为标签，咋填template中的跳转都是这种；
2.另一种是编辑是导航，也就是通过js跳转比如router.push(‘/home’)

6.MVVM

M-model，model代表数据模型，也可以在model中定义数据修改和操作的业务逻辑
V-view,view代表UI组件，它负责将数据模型转化为UI展现出来
VM-viewmodel,viewmodel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步view和model的对象，连接model和view

7.computed和watch有什么区别

computed:
computed是计算属性，也就是计算值，它更多用于计算值的场景
computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算
computed适用于计算比较消耗性能的计算场景
watch:
更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作
无缓存性，页面重新渲染时值不变化也会执行 小结:
当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化