Vue随笔

本文最后更新于:2021年3月3日 中午

Vue的学习笔记

问题汇总

https://segmentfault.com/a/1190000016344599

https://zhuanlan.zhihu.com/p/92407628

一、组件传参

  • 父组件传参给子组件
  • 子组件传参给父组件

二、vue组件中data为什么必须是函数?

三、vue的两个核心

四、vue中key值的作用

唯一标识。用于判断是否为同一个元素(DOM节点)

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

key值还有一个作用是为了高效的更新虚拟DOM

五、Vue的生命周期

1.八阶段

创建前/后,挂载前/后,更新前/后,销毁前/后

beforeCreate 在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,data和methods中的数据都还没有初始化。

created data 和 methods都已经被初始化好了,最早可在该阶段调用 methods 中的方法,或者操作 data 中的数据,

beforeMount 编译好了模板,还没挂载。页面尚未更新

Mounted 初始化完成,挂载到实例,进入运行阶段。最早可以在此阶段操作页面DOM节点。

beforeUpdate 执行到该钩子时,页面上的数据仍是旧的,尚未同步至新数据data

update 页面显示的数据已经与data保持同步更新

beforeDestroy 进入销毁状态,data属性和method方法还处于可用状态,未被真正销毁

destroyed 实例已经被销毁,解除了事件监听和Dom的绑定。注意Dom依旧存在。

2.created和mounted的区别

created:在模板渲染成html前调用,通常是初始化一些属性值、方法

mounted:因为是要挂载到Dom上,因此需要在模板渲染成html后才执行该钩子。通常可以在这里开始操作Dom

3.vue获取数据在哪个周期函数

created/beforeMount/mounted都可以。如果需要操作Dom则需要等到Mounted

4.第一次加载页面会触发哪几个钩子

beforeCreate,created,beforeMount,mounted

零碎

缩写

  • v-bind

    1
    2
    3
    4
    <!-- 完整写法 -->
    <a v-bind:href="url"></a>
    <!-- 缩写 -->
    <a :href="url"><a>
  • v-on

    1
    2
    3
    4
    <!-- 完整写法 -->
    <a v-on:click="handleClick"></a>
    <!-- 缩写 -->
    <a @click="handleClick"></a>

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!