Vue知识点
vue的模板语法用的是哪个web模板引擎,说说理解
印象中是 mustache,模板引擎的初衷是解决早期的字符模板拼接的问题。标志性的语法:双大括号的语法
v-model的原理
原生input其实只是一个语法糖,:bind=”value”与@change=”value = $event.target.value”的结合。
自定义组件的时候的v-model默认监听change事件和绑定value 的prop。
vue开发多语言项目
vue-i18n 使用简单,案例也多,很方便https://www.cnblogs.com/rogerwu/p/7744476.html
在使用计算属性的时,函数名和data数据源中的数据可以同名吗
不能同名 因为不管是计算属性还是data还是props 都会被挂载在vm实例上,因此 这三个都不能同名
vue中data的属性可以和methods中的方法同名吗?为什么?
不可以。data中的属性和methods方法重名会优先执行data中的属性并且报错。
怎么给vue定义全局的方法?
第一种:挂载到Vue的prototype上。把全局方法写到一个文件里面,然后for循环挂载到Vue的prototype上,缺点是调用这个方法的时候没有提示。
第二种:利用全局混入mixin,因为mixin里面的methods会和创建的每个单文件组件合并。这样做的优点是调用这个方法的时候有提示
第三种:通过插件Vue.use(plugin)
vue2.0不再支持v-html中使用过滤器了怎么办?
1:全局方法(推荐)
2:computed 属性
3:$options.filters(推荐)
怎么解决vue动态设置img的src不生效的问题
加require
使用vue后怎么针对搜索引擎做SEO优化
使用服务端渲染,vue官方推荐nuxt.js或者ssr 即单页面后台渲染
跟keep-alive有关的生命周期是哪些?描述下这些生命周期
activated和deactivated
keep-alive的生命周期
1.activated: 页面第一次进入的时候,钩子触发的顺序是created->mounted->activated
2.deactivated: 页面退出的时候会触发deactivated,当再次前进或者后退的时候只触发activated
你知道vue2.0兼容IE哪个版本以上吗
不支持ie8及以下,部分兼容ie9 ,完全兼容10以上
使用vue开发一个todo小应用,谈下你的思路
结构: 输入部分( input )和输出部分( ul )
逻辑:用户输入之后,通过事件触发拿到用户输入的数据存起来,
将用户数据集合通过 v-for 渲染到页面上
当用户点击清单项,通过事件触发移出对应事件
你有看过vue推荐的风格指南吗?
1、使用v-for时记得加key,可以快速定位到需要更新的DOM节点,提高效率。
2、永远不要把 v-if 和 v-for 同时用在同一个元素上。提高渲染效率
3、优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线
4、组件的prop尽可能描述的越详细越好,类型校验
你知道vue中key的原理吗?说说你对它的理解
作用的话,便于diff算法的更新,key的唯一性,能让算法更快的找到需要更新的dom,需要注意的是,key要唯一,不然会出现很隐蔽性的更新问题。详细
vue中怎么重置data
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象
this.$data获取当前状态下的data
this.$options.data()获取该组件初始状态下的data。
bject.assign(this.$data, this.$options.data())
vue渲染模板时怎么保留模板中的HTML注释呢?
...你知道style加scoped属性的用途和原理吗
用途:防止全局同名CSS污染
原理:在标签加上v-data-something属性,再在选择器时加上对应[v-data-something],即CSS带属性选择器,以此完成类似作用域的选择方式
如何在子组件中访问父组件的实例
vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用(https://www.cnblogs.com/jin-zhe/p/9523029.html)
Vue中子组件调用父组件的方法,这里有三种方法提供参考:
1:直接在子组件中通过this.$parent.event来调用父组件的方法
2:在子组件里用$emit向父组件触发一个事件,父组件监听这个事件
3:父组件把方法传入子组件中,在子组件里直接调用这个方法
(https://www.cnblogs.com/jin-zhe/p/9523782.html)
watch的属性用箭头函数定义结果会怎么样
因为箭头函数默绑定父级作用域的上下文,所以不会绑定vue实例,所以 this 是undefind
在vue项目中如何配置favicon?
Vue-cli3中,可以在vue.config.js中的pwa字段配置favicon路径等相关设置
在vue事件中传入$event,使用e.target和e.currentTarget有什么区别?
event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。
vue给组件绑定自定义事件无效怎么解决
两种方式
1、组件外部加修饰符.navtive
2、组件内部声明$emit(‘自定义事件’)
vue怎么实现强制刷新组件
this.$forceUpdate()
v-if
vue给组件绑定自定义事件无效怎么解决
两种方式
1、组件外部加修饰符.navtive
2、组件内部声明$emit(‘自定义事件’)
vue使用v-for遍历对象时,是按什么顺序遍历的?如何保证顺序
1、会先判断是否有iterator接口,如果有循环执行next()方法
2、没有iterator的情况下,会调用Object.keys()方法,在不同浏览器中,JS引擎不能保证输出顺序一致
3、保证对象的输出顺序可以把对象放在数组中,作为数组的元素
vue如果想扩展某个现有的组件时,怎么做呢?
不对原组件进行更改的:
使用Vue.extend直接扩展
使用Vue.mixin全局混入
HOC封装
可以加slot扩展