vue总结一

1.什么是生命周期?什么是钩子函数?

生命周期:从vue实例创建到虚拟dom节点的产生到数据绑定,监听,数据渲染,以及销毁的整个过程。对应有8个钩子函数。

生命周期第一步首先是创建vue实例,进行初始化。

实例初始化阶段,调用beforecreate,完成了实例的相关属性和事件的初始化,不能访问实例的data和methods方法;调用created,意味着实例初始化完成,可以进行data数据模型和methods方法的访问。

实例挂载阶段,调用beforeMount,created调用之后,先判断是否有el属性,如果没有vm.$mount(el),接着判断是否有template属性,如果有转换为render function,如果没有进行el指定外面的html代码解析。这里只完成了模板的解析,并没有绑定数据;调用mounted,完成了vm.$el替换el的操作,实际上就是完成了数据绑定。期间执行了render函数,将模板进行了解析,数据进行了动态绑定。

vue实例更新阶段, beforeUpdate更新虚拟dom节点,updated 完成了页面的重新渲染;

调用了vm.$destroy(),vue实例销毁阶段,beforeDestroy销毁之前调用,此时可以访问vue实例destroyed完成了监听器,子组件,事件监听等移除,销毁vue实例对象。

2.v-if v-else 与v-show区别?

v-if(可以单独使用),表达式为true的时候渲染使用v-if属性的元素,否则使用v-else渲染

v-show(切换css样式中display属性),频繁切换css样式,使用v-show

不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

        v-show 不支持 v-else

        v-show不能和template标签一起使用

        v-show 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

        v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

        v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做;直到条件第一次变为真时,才会开始渲染条件块。

        v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。`

         v-if对应的元素的添加或者删除,

        满足条件添加元素,

       不满足条件删除当前的元素

       使用了v-show的元素对应的是css样式display,

       满足条件对应的是display中的block

       不满足条件对应的是display中的none

3.key属性存在的理由

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做可以使 Vue 变得非常快。但是有些时候,我们却不希望vue复用,这时候Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key 

4.大型项目data中为什么使用的函数而不是对象?

组件可复用的,使用对象时会造成数据污染,return时不是全局变量,每次复用组件时返回的是独立的对象,不会造成变量污染。

 5.全局注册的缺点

比如像webpack这样的构建系统,即使不用一个组件,但它还是会出现在最后的构建结果中,这就使得用户下载的javascript无谓增加。

不同的vue实例中使用全局注册

在同一个实例里面多次使用局部注册

局部注册只有局部注册所在的组件能使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值