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