vue的知识总结

谁践踏了优雅 2023-06-16 01:59 5阅读 0赞

**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来观察这个数据变化