【介绍】

# vue3 的变化
    1.性能的提升
        -打包大小减少41%
        -初次渲染快55%, 更新渲染快133%
        -内存减少54%
    2.源码的升级
        使用Proxy代替defineProperty实现响应式
        重写虚拟DOM的实现和Tree-Shaking
    3.拥抱TypeScript
        Vue3可以更好的支持TypeScript
    4.新的特性
        Composition API（组合API）
        setup配置
        ref与reactive
        watch与watchEffect
        provide与inject
        新的内置组件
        Fragment
        Teleport
        Suspense
        其他改变

        新的生命周期钩子
        data 选项应始终被声明为一个函数
        移除keyCode支持作为 v-on 的修饰符

--------------------------------
 # 组合式API和配置项API
    vue2 ：配置项API
         new Vue({
             el:'#app',
             data:{}
         })

    vue3: 组合式API
        let name='lqz'
        let add=()=>{
        }

。

。

【vue3项目创建】

# 1 跟之前创建vue2一样

# 2 步骤： 1 vue create vue3_demo001 2 注意选择vue3，其他都一样

# 3 webstorm打开--》配置启动

# 4 配置npm 镜像站 npm config set registry https://registry.npmmirror.com

检测：npm config get registry

【vite创建（推荐）】

#1 什么是vite？—— 新一代前端构建工具。
优势如下：
开发环境中，无需打包操作，可快速的冷启动。
轻量快速的热重载（HMR）。
真正的按需编译，不再等待整个应用编译完成。
传统构建 与 vite构建对比图


# 2 兼容性注意
Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本
官网：https://cn.vitejs.dev/

# 3 创建工程
# 不指定名字创建：npm create vite@latest
# 配置npm镜像站：npm config set registry https://registry.npmmirror.com
# 查看镜像站：npm config get registry
# 指定名字创建 
    # 创建项目方式一
    npm create vite@latest
    # 创建项目方式二:指定名字
    npm create vite@latest vue3_demo002
    # 创建项目方式三
    cnpm create vite@latest vue3_demo002
    # 创建项目方式四
    cnpm create vite vue3_demo002
# 3 使用编辑器打开vue3项目
# 4 安装依赖
    npm install 
# 5 运行项目
    npm run dev

。

。

。

【常用API】

1.setup函数

　　# 1 如果使用配置项API---》写起来跟vue2一样 　　

　　# 2 如果写组合式API---》所有代码都要写在setup函数中 　　

　　　　-后期除了setup函数，其他都不带了 　　

　　# 3 setup函数必须返回变量或函数--》在template中才能使用 　　

　　# 4 默认不带响应式，需要使用ref或reactive包裹

 1 <template>
 2   <div class="home">
 3     <h2>姓名：{{ name }}</h2>
 4     <h2>年龄：{{ age }}</h2>
 5     <button @click="handleAdd">点击加年龄</button>
 6     <button @click="handleChange">点击改名字</button>
 7   </div>
 8 </template>
 9 
10 <script>
11 
12 
13 import {ref} from "vue";
14 
15 export default {
16   name: 'HomeView',
17   setup() {
18 //1.插值语法
19 //   let name='张三'
20     let name = ref('张三')
21     // let age=18  默认没有响应式
22     let age = ref(18)  //做成响应式，需要导入模块
23     //2.方法--点击年龄+1
24     function handleAdd() {
25       console.log(age)  //age的类型是RefImpl,
26       age.value += 1  //age的值+1需要通过value来操作
27 
28     }
29 
30     //3.方法--改名字
31     function handleChange() {
32       name.value = '小龙女'
33     }
34 
35     //.必须return,然后才能在template中使用
36     return {name, age, handleAdd, handleChange}
37   }
38 }
39 </script>

2.ref和reactive

# 1 ref 包裹值类型[数字，字符串，布尔]，做成响应式

# 2 reactive包裹引用类型[对象，数组]，做成响应式

# 3 使用reactive包裹的对象，直接通过 . [] 取值赋值就是响应式的

ref包裹的对象，需要使用 对象.value 修改值

# 4 使用ref包裹的，在template中，不用使用 变量.value

##### js###
const hobby = ref('篮球')
const wife = reactive({name: '刘亦菲', age: 38, height: 168})
const handleAddHeight = () => {
    wife.height += 1
}

#### template####
<h1>ref和reacitve</h1>
<p>爱好是：{{ hobby }}</p>
<p>wife名字是：{{ wife.name }}-->wife年龄是：{{ wife.age }}---》wife身高是：{{ wife.height }}</p>
<button @click="handleAddHeight">点击wife身高+1</button>

3.计算属性computed

##### js###
 // 3 计算属性
    const person = reactive({
      firstName: '',
      lastName: ''
    })

    // 只有 计算属性，不修改值的情况
    // person.fullName = computed(() => {
    //   return person.firstName+person.lastName
    // })

    // 支持修改
    person.fullName = computed({
      get() {
        return person.firstName + person.lastName
      },
      set(value) {
        person.firstName = value.slice(0, 1)
        person.lastName = value.slice(1)
      },
    })
    
#### template###
<h1>计算属性</h1>
<p>姓：<input type="text" v-model="person.firstName"></p>
<p>名：<input type="text" v-model="person.lastName"></p>
<p>全名：{{ person.fullName }}</p>
<p>全名修改：<input type="text" v-model="person.fullName"></p>