一、Vue生命周期
生命周期:从Vue实例创建、运行、到销毁期间,伴随着各种事件,这些事件,统称为生命周期
生命周期钩子:生命周期事件的别名
生命周期钩子 = 生命周期函数 = 生命周期事件
二、Vue生命周期函数分类:
1. 初始化阶段生命周期函数: 这个阶段的钩子函数只在初始化时执行一次
beforeCreate(创建前):实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
created(创建后):实例已经在内存中创建OK,此时 ,data 和 methods 已经创建OK,此时还没有开始 编译模板
beforeMount(载入前):此时已经完成了模板的编译,但是还没有挂载到页面中
mounted(载入后):此时,已经将编译好的模板,挂载到了页面指定的容器中显示
2. 更新阶段生命周期函数:这个阶段的钩子函数会在每次发生更新时被调用
beforeUpdate(更新前):状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
updated(更新后):实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了
3. 销毁阶段生命周期函数:这个阶段的钩子函数只在死亡时被调用一次
beforeDestroy(销毁前):实例销毁之前调用 在这一步,实例仍然完全可用
destroyed(销毁后):Vue 实例销毁后调用 调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
三、常用内置指令
v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML,可以包含并解析HTML代码段
v-show : 通过控制 display 样式来控制显示/隐藏
v-if/v-else : 通过控制标签有无来控制显示/隐藏
v-if : 如果为true,当前标签才会输出到页面
v-else : 如果为false,当前标签才会输出到页面
v-bind : 强制绑定解析表达式, 可以省略 v-bind简写为 :
v-on : 绑定事件监听, 一般简写为@
v-for : 遍历数组/对象 v-model能实现表单元素和Model中数据的双向绑定(注意:v-model只能运用在表单元素中)
ref : 指定唯一标识, vue 对象通过$refs 属性访问这个元素对象
v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
四、组件间的通信方式有哪些?用于哪些场景?
1)props接收父组件传入的参数
2)vue 的自定义事件,用于子组件向父组件传递参数
3)消息订阅与发布(如: pubsub 库),可用于兄弟组件间的数据传递
4)slot插槽,可向子组件传递标签
5)vuex状态管理,任意组件间通信
五、vue-router是什么?它有哪些组件?
用Vue写路由的一个插件
router-link相当于超链接,to属性相当于超链接的href属性,最终会被解析为超链接
router-view用于加载路由对应的组件,显示模板内容
六、比较v-if/v-else与 v-show:
V-if:如果为true,当前标签才会输出到页面
V-else:如果为false,当前标签才会输出到页面
V-show:通过display样式来控制显示或隐藏
如果需要频繁切换使用v-show
七、箭头函数的this的特点?
箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候所处的对象就是它的this;如果没有,则是window
八、小知识点
includes(str):判断是否包含指定的字符串
startsWith(str):判断是否以指定字符串开头
endsWith(str):判断是否以指定字符串结尾
const关键字用于定义一个常量
vue初始化变量数据写在data里
九、多选题
1、关于箭头函数参数的说法,正确的有( ABCD)
A.没有参数时用()占位
B.只有一个参数时可以省略(),直接用参数占位
C.大于一个参数时不能省略()
D.多个参数用,号隔开
2、箭头函数的函数体加{}和不加的区别有( BCD )
A.函数体必须加{}
B.函数体只有一句时可以不用加{}
C.函数体如果有多个语句, 则需要用{}包裹
D.加{}时若有需要返回的内容,需要手动return返回
3、vue生命周期在创建前/后的说法,正确的有( ABC )
A.在beforeCreated阶段,vue实例的挂载元素$el为undefined,还未初始化。
B.在beforeCreated阶段,数据对象data为undefined,还未初始化。
C.在created阶段,vue实例的数据对象data就有了。
D.在created阶段,vue实例的挂载元素$el就有了。
4、vue生命周期在更新前/后的说法,正确的有( AC )
A.当data变化时,会触发beforeUpdate方法
B.当data变化时,不会触发beforeUpdate方法
C.当data变化时,会触发updated方法
D.当data变化时,不会触发updated方法
5、vue生命周期在销毁前/后的说法,正确的有( ABD )
A.在执行destroy方法后,对data的改变不会再触发周期函数
B.此时vue实例已经解除了事件监听以及和dom的绑定
C.此时DOM结构不存在了
D.此时DOM结构依然存在