Vue3学习体验（一）

搭建工程

使用`vue-cli`脚手架创建`vue3`工程

vue create vue3-app-vue-cli

Vue-cli官网：https://cli.vuejs.org/zh/guide/installation.html

使用vite搭建`vue3`工程

npm init表示临时的下载vite应用来创建vue3工程，工程名称为vue3-app-vite

npm init vite-app vue3-app-vite

注意：以上方式不是全局安装。

两种方式搭建工程的区别

vue-cli搭建的工程
- import引入时，可以省略文件后缀名，如import App from './App'
- 页面文件index.html放在public目录中
vite搭建的工程
- import引入时，除了js文件不需要加.js后缀外其他文件引入时都要加后缀名，如：import App from './App.vue'
- 页面文件index.html不再放入public目录中，而是放在根目录下，其他的静态资源还是放在public目录下（原封不到生成到打包结果的那些）

二者打包后生成的dist目录结构也不一样。

Vue3变化

总结一些细节变化，不涉及底层原理。

没有 Vue 构造函数了

Vue2 中

import App from "./App.vue";

const app = new Vue(options)
Vue.use()
app.$mount("#app")

这种构造函数方式创建 Vue 更像是一个组件实例，里面有很多属性等，有很多是 $、_开头的属性。

采用具名导出

Vue3中

import { createApp } from "vue";

createApp 表示创建一个应用

这种更新好像叫做 breaking 截断式更新，意思是不再兼容老版。

const app = createApp(App);
app.mount("#app");

这种函数式的创建 Vue，得到的是一个非常纯净的实例对象、一个 Vue 应用对象，里面只提供了必须的、会用到、要用到的方法，那些不太会用到的方法被去掉了。

使用插件方式不同

Vue2 中，Vue.use(插件)，使用的是 Vue 构造函数上的静态方法。
Vue3 中，app.use(插件)，使用的是const app = createApp(App);创建的实例对象的方法。

`this`不同

Vue2 中 this 指向 Vue 构造函数的实例对象，而 Vue3 中 this 指向的是一个 proxy 代理对象。
在这里插入图片描述
但是，
在 Vue3 中我们一般会使用 setup 函数，而在setup函数中，this 指向 undefined

<template>
  <p></p>
</template>

<script>
export default {
  setup() {
    // console.log("所有生命周期钩子函数之前调用");
    // console.log(this); // this -> undefined

    return {};
  },
};
</script>

选项式与组合式

Vue2 是选项式 Api
在这里插入图片描述
Vue3 是组合式 Api

Vue3 中的 setup 函数

<template>
  <h1>count:{{ count }}</h1>
  <p>
    <button @click="decrease">decrease</button>
    <button @click="increase">increase</button>
  </p>
</template>

<script>
export default {
  setup() {
    // console.log("所有生命周期钩子函数之前调用");
    // console.log(this); // this -> undefined

	let count = 0;
	const increase = () => {
		count++;
	}
	const decrease = () => {
        count--;
    };

    // setup中，count是一个对象
    // 实例代理中，count是一个count.value

    return {
      count,
      increase
    };
  },
};
</script>

setup 函数中 return 返回的对象中的属性会被附着到组件实例中。
此时，count 值变化不会触发视图更新，因为 count 不是一个响应式数据。

Vue3 中的数据响应式

如何将上述的 count 变量转成响应式？
Vue3 中提供了一些响应式 Api 来对数据做响应式处理。
修改上面的代码，如下：

<template>
  <h1>count:{{ countRef }}</h1>
  <p>
    <button @click="decrease">decrease</button>
    <button @click="increase">increase</button>
  </p>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    // console.log("所有生命周期钩子函数之前调用");
    // console.log(this); // this -> undefined

    // setup中，count是一个对象
    // 实例代理中，count是一个count.value

    let countRef = ref(0);
    const increase = () => {
      countRef.value++;
    };
    const decrease = () => {
      countRef.value--;
    };
    return {
      countRef,
      increase,
      decrease,
    };
  },
};
</script>

setup 函数环境中，count 是一个对象
模板实例环境中、实例代理中，count 是一个 count.value
在这里插入图片描述
调整以上代码，使用函数封装 increase、decrease 操作逻辑

<template>
  <h1>count:{{ countRef }}</h1>
  <p>
    <button @click="decrease">decrease</button>
    <button @click="increase">increase</button>
  </p>
</template>

<script>
import { ref } from "vue";

function useCount() {
  let countRef = ref(0);
  const increase = () => {
    countRef.value++;
  };
  const decrease = () => {
    countRef.value--;
  };
  return {
    countRef,
    increase,
    decrease,
  };
}

export default {
  setup() {
    // console.log("所有生命周期钩子函数之前调用");
    // console.log(this); // this -> undefined

    // setup中，count是一个对象
    // 实例代理中，count是一个count.value

    //1. 新增

    //2. 修改

    //3. 删除
    return {
      ...useCount(),
    };
  },
};
</script>