现在位置: 首页  >  编程技术  >  前端
vue的知识总结
0 2138 转自:

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


 评论
 站内搜索