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 -> undefinedreturn {};},
};
</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 -> undefinedlet count = 0;const increase = () => {count++;}const decrease = () => {count--;};// setup中，count是一个对象// 实例代理中，count是一个count.valuereturn {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.valuelet 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>