Quelle est la différence entre vue2 et vue3

Différences : 1. La liaison de données bidirectionnelle de Vue2 utilise l'API Object.definePropert() d'ES5, tandis que vue3 utilise le proxy API d'es6 ; 2. Vue3 prend en charge la fragmentation, mais pas vue2. une API synthétique ; 4. Pour créer des données, vue2 place les données dans l'attribut data, tandis que Vue3 utilise la méthode setup() ; 5. vue3 a un composant Teleport, mais pas vue2 ;

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Faites le point sur les différences entre Vue3 et Vue2

1 Le principe de liaison de données bidirectionnelle de vue2 et vue3 a changé

vue2utilise une API de. ES5Object.definePropert()Les données sont détournées et implémentées en combinaison avec le modèle de publication-abonnement.Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3中使用了 es6 的ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下

1. defineProperty只能监听某个属性，不能对全对象监听
2. 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
3. 可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

2. Vue3支持碎片(Fragments)

就是说在组件可以拥有多个根节点。
vue2

vue3

3. Composition API

Vue2与Vue3最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

vue2

export default { props: { title: String }, data () { return { username: '', password: '' } }, methods: { login () { // 登陆方法 } }, components:{ "buttonComponent":btnComponent }, computed:{ fullName(){ return this.firstName+" "+this.lastName; } } }

vue3

export default { props: { title: String }, setup () { const state = reactive({ //数据 username: '', password: '', lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性 }) //方法 const login = () => { // 登陆方法 } return { login, state } } }

4. 建立数据 data

Vue2 - 这里把数据放入data属性中

export default { props: { title: String }, data () { return { username: '', password: '' } } }

在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

使用以下三步来建立反应性数据:

• 从vue引入reactive

• 使用reactive()方法来声名我们的数据为响应性数据

• 使用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据

import { reactive } from 'vue' export default { props: { title: String }, setup () { const state = reactive({ username: '', password: '' }) return { state } } }

template使用，可以通过state.username和state.password获得数据的值。

5. 生命周期钩子 — Lifecyle Hooks

Vue2--------------vue3 beforeCreate -> setup() created -> setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted activated -> onActivated deactivated -> onDeactivated

• setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method

• onBeforeMount() : 组件挂载到节点上之前执行的函数。

• onMounted() : 组件挂载完成后执行的函数。

• onBeforeUpdate(): 组件更新之前执行的函数。

• onUpdated(): 组件更新完成之后执行的函数。

• onBeforeUnmount(): 组件卸载之前执行的函数。

• onUnmounted(): 组件卸载完成后执行的函数

  若组件被包含，则多出下面两个钩子函数。

• onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。

• onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。

6.父子传参不同，setup() 函数特性

总结：

1）、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）

2）、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数

3）、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将setup函数中的this修改成了 undefined）

4）、与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

5）、使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态

注意事项：

1）、setup函数中不能使用this。Vue 为了避免我们错误的使用，直接将setup函数中的this修改成了 undefined

1. defineProperty ne peut surveiller qu'une certaine propriété et ne peut pas surveiller l'objet entier
2. Vous pouvez enregistrer dans et fermeture Attendez que le contenu améliore l'efficacité (liez simplement l'objet entier directement)
3. Vous pouvez surveiller le tableau et vous n'avez plus besoin d'effectuer des opérations spécifiques sur le tableau séparément. vue3.x peut détecter les changements dans le tableau. données internes du tableau

import { toRefs } from 'vue' setup(props) { const { title } = toRefs(props) console.log(title.value) onMounted(() => { console.log('title: ' + props.title) }) }

login () { this.$emit('login', { username: this.username, password: this.password }) }

setup (props, { attrs, slots, emit }) { // ... const login = () => { emit('login', { username: state.username, password: state.password }) } // ... }

import { ref } from 'vue' const count = ref(0) console.log(count.value) // 0

• Introduisez réactif depuis vue
• Utilisez le reactive() méthode Pour déclarer nos données comme données réactives
• Utilisez la méthode setup() pour renvoyer nos données réactives, afin que notre modèle puisse obtenir ces données réactives

nbsp;html>    favicon.ico">   
 
 

• setup() : avant de commencer à créer des composants, avant de créer et d'implémenter la création. . Ce qui est créé, ce sont des données et une méthode
• onBeforeMount() : une fonction exécutée avant que le composant ne soit monté sur le nœud.
• onMounted() : Fonction exécutée après le montage du composant.
• onBeforeUpdate() : Fonction exécutée avant la mise à jour du composant.
• onUpdated() : fonction exécutée une fois la mise à jour du composant terminée.
• onBeforeUnmount() : Fonction exécutée avant le démontage du composant.
• onUnmount() : Fonction exécutée une fois le démontage du composant terminéSi le composant est inclus par, les deux fonctions hook suivantes seront disponibles.
• onActivated() : le composant inclus aura deux autres fonctions de hook de cycle de vie. Exécuté une fois activé.
• onDeactivated() : Par exemple, passage du composant A au composant B, exécuté lorsque le composant A disparaît.

import { toRefs } from 'vue' setup(props) { const { title } = toRefs(props) console.log(title.value) onMounted(() => { console.log('title: ' + props.title) }) }

login () { this.$emit('login', { username: this.username, password: this.password }) }

setup (props, { attrs, slots, emit }) { // ... const login = () => { emit('login', { username: state.username, password: state.password }) } // ... }

import { ref } from 'vue' const count = ref(0) console.log(count.value) // 0

nbsp;html>    favicon.ico">