Vue知识小结

一、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结构依然存在