美文网首页
Vue知识小结

Vue知识小结

作者: Agony_锐 | 来源:发表于2020-07-27 11:26 被阅读0次

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

    相关文章

      网友评论

          本文标题:Vue知识小结

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