Vue2和Vue3的区别

2024-06-03  本文已影响0人  AC编程

一、响应式-双向数据绑定原理发生了改变

Vue2 的双向数据绑定是利用ES5的一个APIObject.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。Vue3中使用了ES6的Proxy API对数据代理。

Vue2使用defineProperty存在一些问题

Proxy代理

1.1 Vue2的响应式原理

Vue 2使用了一个名为Object.definePropert()的API来实现数据的响应式。在Vue 2中，当你将一个对象传递给Vue实例作为其data选项时，Vue会遍历这个对象的属性，并使用Object.defineProperty()为每个属性添加getter和setter方法。这样一来，当你访问或修改这些属性时，Vue就能够追踪到变化，并触发视图的更新。

数据劫持的概念是指在访问或修改对象属性时拦截这些操作并进行一些额外的处理。在Vue 2中，数据劫持是通过使用Object.defineProperty()的getter和setter方法实现的。当你访问一个属性时，getter方法会被触发，而当你修改一个属性时，setter方法会被触发。通过在getter和setter方法中进行依赖收集和派发更新，Vue能够实现数据的响应式。

1.2 Vue3的响应式原理

Vue3对其响应式系统进行了重写，引入了一个名为Proxy的新API来实现数据的响应式。Proxy是ES6中的一个新特性，它允许你拦截对对象的访问、修改和删除等操作，并在拦截函数中执行自定义的逻辑。

在Vue 3中，当你将一个对象传递给Vue实例作为其data选项时，Vue会使用Proxy代理这个对象，并对对象的属性进行拦截。这样一来，当你访问或修改这些属性时，拦截函数会被触发，并且你可以在拦截函数中执行一些额外的逻辑，比如依赖收集和派发更新。

二、生命周期钩子Lifecyle Hooks

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

若组件被<keep-alive>包含，则多出下面两个钩子函数。

三、两种API风格

Vue2选项式 API 、Vue3组合式 API

3.1 选项式 API (Options API)

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
3.2 组合式 API (Composition API)

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

下面是使用了组合式 API 与 <script setup> 改造后和上面的模板完全一样的组件：

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

四、数据定义

在Vue2中，数据需要在data选项中定义，并且只有在data中定义的数据才会被Vue的响应式系统追踪和更新。

// Vue 2
export default {
  data() {
    return {
      message: 'Hello, Vue 2!'
    }
  }
}

而在Vue 3中，可以直接使用ref或reactive函数来定义响应式数据，这样无需将数据放在data选项中。

// Vue 3
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    
    // 组件逻辑
    
    return {
      message
    };
  }
}

在Vue 2中，组件的方法需要在methods选项中定义。

// Vue 2
export default {
  methods: {
    handleClick() {
      // 处理点击事件的逻辑
    }
  }
}

而在Vue 3中，可以直接在setup函数中定义组件的方法，并将其返回。

// Vue 3
export default {
  setup() {
    const handleClick = () => {
      // 处理点击事件的逻辑
    }
    
    // 组件逻辑
    
    return {
      handleClick
    };
  }
}

五、TypeScript

上一篇 下一篇

猜你喜欢

热点阅读