美文网首页
2019-03-28(Vue知识点1)

2019-03-28(Vue知识点1)

作者: Heily99 | 来源:发表于2019-03-28 18:11 被阅读0次

    1、对于Vue是一套渐进式框架的理解

    ----简单地说就是可以只使用一部分功能而不需要懂其他的模块,也可以vue全家桶一起上。

    2、vue.js的两个核心是什么?

    ----数据驱动(mvvm省去手动操作dom,通过改变数据来渲染模板)和组件化思想(封装,模块化思想)。

    3、请问 v-if 和 v-show 有什么区别

    ----都是动态显示DOM元素。v-if是动态的向DOM树内添加或者删除DOM元素,v-show是通过设置DOM元素的display样式属性控制显隐。v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件,v-show只是简单的基于css切换。v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译,v-show是在任何条件下都被编译,然后被缓存,而且DOM元素保留。v-if有更高的切换消耗,v-show有更高的初始渲染消耗,v-if适合运营条件不大可能改变,v-show适合频繁切换。

    4、vue常用的修饰符

    .number---如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符

    .trim-----如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符

    .stop---事件冒泡(事件不会向上传递)

    .prevent-----阻止默认事件(不触发默认事件)

    .stop.self.prevent-----指定元素触发(不包括子元素)

    5、v-on可以监听多个方法吗?

    可以,点击事件、鼠标事件、键盘事件都可以同时绑定在同一个元素上面

    6、vue中使用v-for的时候,key值作用?

    需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确地识别此节点,找到正确的位置插入新的节点

    7、vue-cli项目升级vue版本?

    在项目目录里运行 npm upgrade vue vue-template-compiler,不出意外的话,可以正常运行和 build。如果有任何问题,删除 node_modules 文件夹然后重新运行 npm i 即可

    8、vue事件中如何使用event对象?

    事件中传入$event

    9、$nextTick的使用?

    在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作并无作用,而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象

    10、Vue 组件中 data 为什么必须是函数?

    在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中,data必须是一个函数,因为每一个 vue 组件都是一个 vue 实例,通过 new Vue() 实例化,引用同一个对象,如果 data 直接是一个对象的话,那么一旦修改其中一个组件的数据,其他组件相同数据就会被改变,而 data 是函数的话,每个 vue 组件的 data 都因为函数有了自己的作用域,互不干扰。

    11、v-for 与 v-if 的优先级?

    v-for比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候,最好的方法是外层包一层template,上面绑定v-if

    12、vue中子组件调用父组件的方法?

    父组件自定义事件,子组件使用$emit触发这个事件

    13、vue中如何编写可复用的组件?

    *.规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名。

    **.数据扁平化:定义组件接口时,尽量不要将整个对象作为一个 prop 传进来。每个 prop 应该是一个简单类型的数据。这样做有下列几点好处:

    *** 组件接口清晰。***props 校验方便。***当服务端返回的对象中的 key 名称与组件接口不一样时,不需要重新构造一个对象。

    扁平化的 props 能让我们更直观地理解组件的接口。

    ****可复用组件只实现 UI 相关的功能,即展示、交互、动画,如何获取数据跟它无关,因此不要在组件内部去获取数据。

    *****.可复用组件应尽量减少对外部条件的依赖。

    ******.组件在功能独立的前提下应该尽量简单,越简单的组件可复用性越强。

    *******.组件应具有一定的容错性。

    14、vue生命周期钩子函数有哪些?

    beforeCreate:el 和 data 并未初始化 (此方法不常用)

    created:完成了 data 数据的初始化,el的初始化未完成。用来发送ajax

    beforeMount:(执行此方法时已经完成了 el 和 data 初始化 (已经赋予了对应的值))

    渲染DOM之前先确认下是否有要编译的根元素(有无el属性),有才继续确认是否具有模板属性template,如果有模版属性,则会用template的值替换掉HTML中的结构,template模版中只能有一个根元素(而且不能是文本);

    mounted:(执行此方法时代表已经挂载结束了)

    把编译好的数据挂载到DOM元素上,最后渲染成真实的DOM元素;真实DOM已经渲染完成,可以操作DOM了

    beforeUpdate:当页面依赖的数据更改之后触发(此时DOM结构还没有重新加载)

    updated:DOM结构重新加载之后触发

    调用vm.$destroy()之后触发下面两个事件:

    beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。(可在此处清除定时器,清除事件绑定)

    destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

    15、vue更新数组时触发视图更新的方法?

    push(), pop(), shift(), unshift(), splice(), sort(), reverse()

    pop() 方法用于删除最后一个元素,把数组长度减 1,并且返回它删除的元素的值。

    shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度

    splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。 该方法会改变原始数组。

    sort() 方法用于对数组的元素进行排序。

    reverse() 方法用于颠倒数组中元素的顺序

    Vue.set() 响应式新增与修改数据

    相关文章

      网友评论

          本文标题:2019-03-28(Vue知识点1)

          本文链接:https://www.haomeiwen.com/subject/ydzqbqtx.html