Vue3新特性介绍，如何创建vue3.0项目

开头先说一说Vue2

Vue2响应原理

使用Object.defineProperty方法实现响应式数据， Object.defineProperty 将对象属性转化为 getter/setter。Object.defineProperty 有缺点就是无法监控到数据的下标变化，从而导致了无法通过数组的下标来修改数组值，无法相应。 原理可以用官网的一张图更能形象说明！

缺点

对于数组的下标和length属性的变更无法检测到;
对于对象属性的动态添加和删除无法检测到;
不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。

如何解决这些缺点

在vue种通过提供一个 $set 给对象动态添加属性，这个属性在vue种经常用到，特别的表单中的联动中，既然有添加，当然想对应也有删除，$delete 动态删除对象属性，在$set和$delete的时候都会触发watcher，而这个对象的所有 watcher 都会重新运行。
对于数组，就比较笨拉，就是重写数组方法，通过检测数组的变更来处理

vue3.0是什么

Vue3.0又称为vue-next,主要3个特点: 响应式、模板、对象式的组件声明方式，进行了全面的更改，底层实习和上层的api都有了明显的变化，基于Proxy重新实现了响应式，基于treeshaking内置了更多的功能，提供了类式的组件声明方式。

首先，我们需要把项目vue-next-webpack-preview复制过来，此项目包含Vue的设置

git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment
cd vue3-experiment
npm i

完成后，npm run dev启动项目

以前我们会用new Vue()去创建应用，现在我们引入createApp方法去创建。

// main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

我们会调用createApp方法，然后把我们定义的Vue实例对象作为参数传入，之后createApp方法会返回一个app对象。

下一步，我们会调用app对象的mount方法，把我们css选择器的元素传进去，这个就像我们之前的vue2的$mount方法一样

以前的话，我们会把一些全局写在这里(如plugins, mixins, prototype properties等等)，假如有多个app的话，会造成实例污染

Vue.mixin({ ... })

const app1 = new Vue({ el: '#app-1' })
const app2 = new Vue({ el: '#app-2' })

vue3的createApp会返回一个全新的app，从而规避这个问题了。

setUp函数

setup函数是一个新的vue组件选项，是用于在组件中使用Composition API 的入口

• 使用Composition API 的入口
• 在beforeCreate之前调用
• 在setup中没有this
• 返回对象中的属性刻在模板中使用

<script>
import { reactive, ref, watch, isRef, toRefs, computed} from 'vue'

export default {
  setup(props, context) {
  	const name =ref('小四')
    const count = ref(100)
    const count2 = ref(1)
    const obj = reactive({ count: 0 });
    
	watch(
      () => count.value,
      () => {
        console.log(count);
      }
    );
    count.value = 200; //watch 被执行

	const plusOne = computed({
      get: () => count2.value + 1,
      set: val => {
        count2.value = val - 1;
      }
    });
    plusOne.value = 1;
    console.log(count2.value); // 0
    return {
      name
      count,
      obj 
    }
  }
}
</script>

Reactive (声明单一对象时使用)

取得一个对象并返回原始对象的响应数据处理

ref(声明基础数据类型变量时使用)

内部值并返回一个响应性且可变的ref对象。ref对象具有.value指向内部值得单个属性。

IsRef和toRefs

检出一个对象是否是ref对象:

Watch 侦听器

Computed

它可以使用具有get和set功能的对象来创建可写的ref对象

生命周期挂钩

import { onMounted, onUpdated, onUnmounted } from 'vue'
export default {
  setup() {
    onMounted(() => {
      console.log("mounted!");
    });
    onUpdated(() => {
      console.log("updated!");
    });
    onUnmounted(() => {
      console.log("unmounted!");
    });
  }
};

2.x生命周期选项和Composition API之间的映射

beforeCreate ->使用 setup()

created ->使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

如何搭建vue3项目，这个文章也有介绍，点击进入