搭建工程
使用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>
