1.讲一下组件的命名规范
Vue中组件的命名规范在官网中有明确的写法.
有两个规范规则
- 组件名必须为多个单词, 这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。
- 组件的命名一般有两种方式:
- 脊柱命名法:xxx-xxx.
- 大驼峰命名法:XxxxXxx.
使用大驼峰方式的命名只可以用于其他组件的template中,在渲染页面时使用,需要转换为脊柱的方式.
2.怎么捕获 Vue 组件的错误信息?
在vue官网中写了2种捕获 Vue 组件的错误信息的方法
- 全局配置中的errorHandler(全局钩子).指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。当中有三个参数分别为err,vm,info
- 组件内使用钩子errorCaptured,是vue5.0新增的钩子函数, 在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
3.怎么在组件中监听路由参数的变化？
参数或查询的改变并不会触发进入/离开的导航守卫,所以可以通过以下两种方法进行查询
方法一：监听 $route
watch:{
'$route' (to, from) {
// 想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象
console.log(to, from)
}
},
方法二:通过组件内的导航守卫，beforeRouteUpdate , （和created(){}生命周期函数同级别）；
beforeRouteUpdate (to, from, next) {
console.log('to:',to)
console.log('from:', from)
next();// 记得next()
},
4.Vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗?
vue中自定义组件一般分为四步
第一步：在 components 目录新建你的组件文件（indexPage.Vue），script 一定要 export default 暴露出去.
第二步：在需要用的页面（组件）中导入：import indexPage from '组件所在地'
第 三 步 ： 注 入 到 Vue 的子组件的 components 属性上面注册,components:{indexPage}
第四步：在 template 视图 view 中使用， 例如有 indexPage 命名，使用的则写 index-page.
5、Vue 组件里的定时器要怎么销毁？（必会）
vue中定时器的清除方法有两种
第一种
- 在data中设定变量timer
- 给定时器取名
- beforeDestroy生命周期内清除定时器使用clearInterval
第二种
只能一个定时器的情况下 可以使用$once这个事件监听器在定义完定时器之后的位置来清除定时器.
代码
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
6.Vue 中 slot的使用方式，以及 slot作用域插槽的用法 （必会）
使用方式：当组件当做标签进行使用的时候，用 slot 可以用来接受组件标 签包裹的内容，当给 solt 标签添加 name 属性的 时候，可以调换响应的位置
作用域插槽： 作用域插槽其实就是带数据的插槽，父组件接收来自子组件 的 slot 标签上通过 v-bind 绑定进而传递过来的数 据，父组件通过 scope 来进 行接受子组件传递过来的数据
7.Vue 该如何实现组件缓存?（必会）
在面向组件化开发中，我们会把整个项目拆分为很多业务组件，然后按照合 理的方式组织起来，那么自然会存在组件之前切换的问题，Vue 中有个动态组件 的概念，它能够帮助开发者更好的实现组件之间的切换，但是在面对需求频繁的 变化，去要切换组件时，动态组件在切换的过程中，组件的实例都是重新创建的， 而我们需要保留组件的状态，为了解决这个问题，需要使用到 Vue 中内置组件 <keep-alive>
<keep-alive></keep-alive>包裹动态组件时，会缓存不活动的组件实例, 主要用于保留组件状态或避免重新渲染，
简单来说: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=> 返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可 以对列表组件使用进行缓存，这样用户每次返回列 表的时候，都能从缓存中快速渲染，而不是重新渲染
8.跟keep-alive有关的钩子函数
当在开发vue项目的时候,有的组件没必要多次渲染,所以vue提供了keep-alive来缓存组件内部状态,避免重新渲染
如果没有缓存,每次创建该组件,都会经历整个生命周期,这样比较浪费性能.
在被keep-alive包含的组件/路由中,会多出两个钩子函数:activated和Deactivated.
一、Activated钩子调用时机:
官网说其是在服务器端渲染期间不被调用，说白了其就是在挂载后和更新前被调用的。但如果该组件没有被<keep-alive>包裹的话，activated是不起作用的。
二、Deactivated钩子调用时机：
keep-alive组件停用时调用,使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了，这个钩子可以看作beforeDestroy的替代
9.Vue 常用的修饰符都有哪些？（必会）
常用的修饰符有以下几种
1. .trim 输入框过滤首尾的空格
2. .number 先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字
3. .sync 对prop进行双向绑定
4. .keyCode监听按键的指令，具体可以查看vue的键码对应表
5. .self 只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡
6. .stop 阻止事件冒泡，相当于调用了event.stopPropagation()方法
7. .prevent 阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件
8. .once 事件只能用一次，无论点击几次，执行一次之后都不会再执行
9. .capture capture的作用添加事件侦听器时使用事件捕获模式。即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
10. .lazy 输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据
10.Vue 常用的指令都有哪些？并且说明其作用
Vue官方提供的指令总共是有14个，分别是：
1.v-model：本质上是一个语法糖，底层原理是由@input事件+value实现的，可用于表单元素实现双向数据绑定，也可实现父子组件传值
2.v-for：指令基于一个数组来渲染一个列表。建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化
- 3.v-show：的原理是动态为元素添加或移除 `display:none` 样式，来实现元素的显示和隐藏
4.v-if：的原理是动态创建或移除元素，实现元素的显示和隐藏
5.v-else-if与v-else必须和v-if搭配使用，否则会报错
6.v-bind：为元素的属性动态绑定值
7.v-on：给标签绑定事件，可以简写为@
8.v-text：用于解析文本，但不能解析标签，并且会覆盖元素内部原有的内容！
9.v-html：可以把带有标签的字符串，渲染成真正的 HTML 内容！
10.{{}}：差值表达式，内容的占位符，不会覆盖原有内容
11.自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数？还有哪些钩子函数参数？
Vue除了核心功能默认内置的指令，也允许注册自定义指令。因为有些时候我们仍然需要对普通DOM元素进行底层操作。
自定义指令分为全局和局部定义，全局通过Vue.directive(‘指令名’,{钩子函数})定义，局部通过directives配置项定义。
钩子函数分别是：
（1）bind：只调用一次，指令第一次绑定到元素时调用
（2）inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
（3）update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
（4）componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
（5）unbind：只调用一次，指令与元素解绑时调用。
钩子函数参数分别是：
（1）el：指令所绑定的元素，可以用来直接操作 DOM。
（2）binding：一个对象，包含以下 property（name，value，oldValue，expression，arg，modifiers）。
（3）vnode：Vue 编译生成的虚拟节点。
（4）oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
