vue3项目初始化及新特性体验（一）

前段时间刚发布了vue3的beta版本，这几天大概上手体验了一下，感觉有些东西变化还是挺明显的，虽然完全兼容之前的api，不过新版vue肯定是更有优势的，具体优势的体现还需要以后开发中会慢慢体会到。

一、初始化项目

首先，安装脚手架(已经安装过的可跳过此步骤)

npm install -g @vue/cli

然后初始化项目，

vue create vue3-test

选择自定义模式，把vuex、vue-router选上。（PS：目前beta版本不支持ts的项目，所以用ts开发的同学还要再等等）

然后执行（PS：升级vue3这一步，昨天我试了好几次，升级之后项目都跑不起来，应该是网络问题导致包下的有问题，今天试了一下是正常的）

vue add  vue-next

会下载vue-cli-plugin-vue-next，把我们项目的模板和api都升级到vue3.

接下来，就可以使用vue3的新特性了。

目前vue3的官方文档还没出，不过可以在这个网站看一下vue3目前的新特性点我看vue3新版特性

二、vue3新特性

1.demo

因为组件库都不支持vue3，所以demo都用原生来写。

2.setup函数

vue3使用上的一大特点，就是将组建所有的初始化逻辑都放在了setup函数上，以前数据的初始化放在了data里，函数和computed、watch的初始化放在了对应的选项上，同时新版vue3去掉了created和beforeCreate两个钩子。

来看一下钩子函数的保留情况（截图出自vue3-beta的api参考 地址戳我）

所以，我们现在是在setup中初始化data和方法和computed等等

2.reactive

reactive与之前版本的Vue.observable()方法等效，顾名思义，就是将一个对象编变成一个响应式的属性。在vue3中返回的是一个Proxy包装之后的对象，之前的2.X版本中是返回一个监听了set和get的对象。

    123
    const radius = reactive({
      boolean: false
    });
    return {
      radius
    };

3.ref

ref与reactive类似，区别在于，ref可以将单个值包装成一个响应式属性，reactive是将一个对象包装成了响应式属性。

因为proxy只能拦截对于对象的操作，所以ref也是声明一个对象，取值时默认使用value属性取值，不过在模板中使用时可以直接写属性名，vue帮我们自动取值了。

    const count = ref(1);
    const clickEvent = () => {
      state.value++;
      count.value++;
    };

模板：

    {{count}}

4.watchEffect

vue3中新增的watchEffect和之前的watch有点像，不过watchEffect可以自动追踪你用到的响应式属性，去执行你的逻辑。

    onMounted(() => {
      watchEffect(() => {
        console.log(state.value);
        document.querySelector("#content").innerHTML = new Date().toString();
      });
    });

按照我的理解，你在这个函数中使用到的响应式属性会作为依赖项，依赖项只要发生变化，就会执行这个回调函数。

需要注意的是，watchEffect会在当前组件挂载之前调用，如果逻辑涉及到dom操作，应将watchEffect放在onMounted（）钩子里面。

watchEffect支持第二个参数，是一个options选项，分别为flush、onTrack、onTrigger。

flush属性指定了回调触发的时机，默认为post，可用的值为post、sync、pre。

post:组件更新之后触发

sync:同步触发

pre:组件更新之前触发。

看看demo：

      watchEffect(
        () => {
          console.log(state.value, "post");
        },
        {
          flush: "post"
        }
      );
      watchEffect(
        () => {
          console.log(state.value, "sync");
        },
        {
          flush: "sync"
        }
      );
      watchEffect(
        () => {
          console.log(state.value, "pre");
        },
        {
          flush: "pre"
        }
      );

结果：

ontrack是在watchEffect初始化时触发，onTrigger是在依赖项发生变化时触发，这两个选项是用于调试的，参数是依赖项的信息

5.computed

computed的使用方式和之前的十分类似

函数的返回值作为依赖项，并且返回的数据是可响应的。也支持含get和set选项的对象

    const status = computed(() => state.value * state.value);

6.watch

watch和之前的也类似，第一参数是监听的数据源，第二个参数是回调函数。

值得一提的是，vue3的watch支持同时监听多个数据源，写成数组形式

    watch(
      () => state.value,
      (newVal, oldVal) => {
        console.log("state has change");
      }
    );

    watch(
      [() => state.value, count],
      ([newState, newCount], [oldState, oldCount]) => {
        debugger;
        console.log("state or count has change");
      }
    );

需要注意的是，watch的数据源可以直接写ref数据，但是不能直接写reactive数据，下面这样是不行的

    watch(state.value, (newVal, oldVal) => {
      console.log("state has change");
    });

 监听整个reactive对象,也能触发watch，不过回调函数的参数是新旧两个proxy对象，所以如果要监听reactive属性，最好写成()=>state.value这种形式

其他特性待补充