关于前端:Vue2和Vue3基础入门对比

38次阅读

共计 1098 个字符,预计需要花费 3 分钟才能阅读完成。

1. 在 Vue2 中咱们通过通过用 Vue 函数创立一个新的 Vue 实例, 例如:

var vm = new Vue({// 选项})

留神:一个 Vue 利用由一个通过 new Vue 创立的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成 

1.1 在 Vue2 中咱们挂载实例:

<div id="app">
</div>
new Vue({el: '#app'})

1.2 在 Vue2 中生命周期钩子:

beforeCreate    组件实例被创立之初
created    组件实例曾经齐全创立
beforeMount    组件挂载之前
mounted    组件挂载到实例下来之后
beforeUpdate    组件数据发生变化,更新之前
updated    组件数据更新之后
beforeDestroy    组件实例销毁之前
destroyed    组件实例销毁之后
activated    keep-alive 缓存的组件激活时
deactivated    keep-alive 缓存的组件停用时调用
errorCaptured    捕捉一个来自子孙组件的谬误时被调用 

2. 在 Vue3 中通过 createApp 函数创立一个新的 利用实例,例如:

import {createApp} from 'vue'

const app = createApp({/* 根组件选项 */})

2.1 在 Vue3 中挂在实例:

<div id="app"></div>
app.mount('#app')
利用实例必须在调用了 .mount() 办法后才会渲染进去。该办法接管一个“容器”参数,能够是一个理论的 DOM 元素或是一个 CSS 选择器字符串  

2.2 在 Vue3 中生命周期钩子:

onBeforeMount – 在挂载开始之前被调用:相干的 render 函数首次被调用。onMounted – 组件挂载时调用
onBeforeUpdate – 数据更新时调用,产生在虚构 DOM 打补丁之前。这里适宜在更新之前拜访现有的 DOM,比方手动移除已增加的事件监听器。onUpdated – 因为数据更改导致的虚构 DOM 从新渲染和打补丁,在这之后会调用该钩子。onBeforeUnmount – 在卸载组件实例之前调用。在这个阶段,实例依然是齐全失常的。onUnmounted – 卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。onActivated – 被 keep-alive 缓存的组件激活时调用。onDeactivated – 被 keep-alive 缓存的组件停用时调用。onErrorCaptured – 当捕捉一个来自子孙组件的谬误时被调用。此钩子会收到三个参数:谬误对象、产生谬误的组件实例以及一个蕴含谬误起源信息的字符串。此钩子能够返回 false 以阻止该谬误持续向上流传。

正文完
 0