Vue3【进阶】

简介

https://cn.vuejs.org/guide/introduction.html

创建vue3工程

【基于 vue-cli创建】

基本和vue-cli的过程类似，只是选择的时候用vue3创建

【基于vite创建】【推荐】

【官网】https://vitejs.cn/ 【可以先去学一下webpack】

步骤【https://cn.vitejs.dev/guide/】

npm create vue@latest
pnpm create vue

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
bash

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

# bun
bun create vite my-vue-app --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts，solid，solid-ts，qwik，qwik-ts。

命令行创建

小结

VUE3核心语法

【optionsAPI】和【compositionAPI】->【vue2】和【vue3】

拉开序幕的【setup】

新的配置项
setup语法糖出现时机在beforecreated之前
setup的返回值也是一个渲染函数

【面试题】setup和vue2中的data、method有什么区别？

可以同时存在
setup执行的比data的早（data可以拿到setup中的值，但是反过来拿不到）

Setup语法糖

之前的写法

缺点是：每次都要返回数据和方法
语法糖写法

不需要返回，setup自动给你返回；只关注数据和方法
因为最新的语法糖省去了name,则利用插件npm i vite-plugin-vue-setup-extend -D来命名

一般其实和文件名一样可以不写

ref_可以实现【基本类型】响应式数据【让数据动起来】

vue2->都放在data中，就是响应式了
vue3->ref 和 reative 此ref不是vue2中的ref

什么时候需要value和什么时候不需要value是需要注意的点
模块中不需要。JS中操作需要！

作用：

reactive_创建【对象类型】【只能定义】响应式数据

ref_可以实现【对象类型】响应式数据【让数据动起来】

需要注意的是：

使用ref的时候必须加上.value去拿到值
ref的实现也是基于reactive实现的（底层逻辑）
ref既可以定义基本类型也可以对象类型

【ref对比reactive】

可以用volar插件【目前是官方vue插件】自动添加.value

在设置中进行设置-勾上即可

toRefs 和 toRef

<template>
  <h1>hello</h1>
  <h1>姓名：{{ name }}</h1>
  <h1>年龄：{{ age}}</h1>
  <button @click="changeName">修改名字</button>
  <button @click="changeAge">修改年龄</button>

</template>

<script setup lang="ts">
  import { reactive,toRefs } from 'vue';

  let person = reactive({
    name: 'John',
    age:22
  })
  // toRefs 就是将reactive中的数据都取出来 数据还是具备响应式
  let {name, age} = toRefs(person)
  const changeName = () =>{
    name.value = 'lisi'
  }
  const changeAge = () =>{
    age.value += 1
  }
</script>

<style>

</style>

computed属性【是有缓存的】

<template>
    姓：<input type="text" v-model="names"><br>
    名：<input type="text" v-model="ming"><br>
    姓名: <h1>{{fullname}}</h1>
    <button @click="changeFullname">修改全名</button>
</template>

<script setup lang="ts">
import { ref ,computed} from 'vue';

let names= ref('张三')
let ming = ref('ming')


// 只读的不可修改的
// let fullname =computed(()=>{
//    return names.value +  ming.value.slice(0,1).toUpperCase() + ming.value.slice(1)
// })
// 这样可读可写
let fullname =computed({
  
    get(){
        return names.value +  ming.value.slice(0,1).toUpperCase() + ming.value.slice(1)
    },
    set(vals){
        const x = vals.split('-')
        names.value = x[0]
        ming.value = x[1]
        console.log(x);
    },
})
let changeFullname  = ()=>{
    console.log(fullname.value);
    fullname.value = 'li-si'
    
}
</script>

<style>

</style>

watch监视数据的变化

情况一【常用】：

<template>
    <div class="person">
        <h1>情况一</h1>
        <h1>sum：{{ sum }}</h1>

        <button @click="changeName">点我sum+1</button>
    </div>
</template>

<script setup lang="ts">
import {ref,watch} from 'vue'
let sum = ref(100)

let changeName = ()=>{
    sum.value += 100
}
const stopWatch =  watch(sum,(newValue,oldValue)=>{
    console.log(newValue,oldValue);
    if(newValue>1000){
        stopWatch()
    }
})
</script>

<style>

</style>

情况二：

<template>
  <div class="person">
    <h1>姓名：{{person.name }}</h1>
    <h2>年龄：{{person.age}}</h2>
    <button @click="changename">修改年龄</button>
    <button @click="changeperson">修改person</button>

  </div>
</template>

<script lang="ts" setup>
import {ref,watch} from 'vue'
    let person = ref({
        name:"zhangsan",
        age:22,
    })
    const changename = () =>{
        person.value.age += 1;
    }
    const changeperson = () =>{
        // 如果是recative 就要用object.assgin
        person.value = {name:"zha33ngsan", age:2342}
    }
    watch(person,(newValue,oldValue)=>{
        console.log(newValue,oldValue);
        
    },{deep:true,immediate:true})

</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
    }
</style>

情况三：

看一个案例：ref 和 reactive 对象赋值的区别

<template>
  <div class="person">
    <h1>姓名：{{person.name }}</h1>
    <h2>年龄：{{person.age}}</h2>
    <button @click="changename">修改年龄</button>
    <button @click="changeperson">修改person</button>

  </div>
</template>

<script lang="ts" setup>
import {ref,watch,reactive} from 'vue'
    let person = reactive({
        name:"zhangsan",
        age:22,
    })
    const changename = () =>{
        person.age += 1;
    }
    const changeperson = () =>{
        // 如果是recative 就要用object.assgin
        Object.assign(person,{name:"zha33ngsan", age:2342})
    }
    watch(person,(newValue,oldValue)=>{
        console.log(newValue,oldValue);
        
    })

</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
    }
</style>

情况四【常用】【函数式】:

结论: 监视的要是对象里面的属性，最好写成函数，注意：若是监视的是地址值，需要关注对象内部。需要开启手动深度监视

<template>
  <div class="person">
    <h1>姓名：{{person.name }}</h1>
    <h2>年龄：{{person.age}}</h2>
    <h2>汽车：{{person.car.car1}}-{{ person.car.car2 }}</h2>
    <button @click="changename">修改年龄</button>
    <button @click="changeperson">修改person</button>
    <button @click="changeCar1">修改car1</button>
    <button @click="changeCar2">修改car2</button>
    <button @click="changeAll">修改全部</button>
  </div>
</template>

<script lang="ts" setup>
import {ref,watch,reactive} from 'vue'
    let person = reactive({
        name:"zhangsan",
        age:22,
        car:{
            car1:'hello1',
            car2:'hello2'
        }
    })
    const changename = () =>{
        person.age += 1;
    }
    const changeperson = () =>{
        // 如果是recative 就要用object.assgin
        Object.assign(person,{name:"zha33ngsan", age:2342})
    }
    const changeCar1 = ()=>{
        person.car.car1 = 'world1'
    }
    const changeCar2 = ()=>{
        person.car.car2 = 'world2'
    }
    const changeAll = ()=>{
        person.car = {car1:'hello221', car2:'hello241'}
    }
    watch(()=>{return person.age},(newValue,oldValue)=>{
        console.log(newValue,oldValue);
        
    })
    watch(()=>person.car,(newValue,oldValue)=>{
        console.log(newValue,oldValue);
        
    },{deep:true})
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
    }
</style>

情况五:

监视上述的多个数据【多个函数】

    watch([()=>person.name,()=>person.car.car1],(newValue,oldValue)=>{
        console.log(newValue,oldValue);
    },{deep:true})

【多写项目-练习】

watchEffect

标签中ref属性

回顾TS中的接口_泛型_自定义类型

Props的使用

vue2【父子之间的通信】

vue3通信

注意点：【区别一下：的绑定和 ref的区别】

【父子之间的传值的多种方式】

【注意：宏函数不用引入，例如defineProps】

理解生命周期【组件的一生】

创建、挂载、更新、销毁【每个时期都调用特定的函数】
created 、 mounted 、updated 、destoyed
叫法：生命周期、生命周期函数、生命周期钩子

vue2的生命周期

创建、（前与后）（beforeCreate|Created）
挂载、（前与后）（beforeMount|Mounted)
更新、（前与后）（beforeUpdate|updated)
销毁、（前与后）（beforeDestory|destoryed)

vue3的生命周期

自定义hooks【mixin】【重】

路由

两个注意点

路由组件：pages/views
一般组件：components

to的两种写法

路由器工作模式

【history 和 hash模式】

命名路由

嵌套路由

路由_query参数

路由_params参数

必须为name
参数如果可传可不传则添加？在占位的地方
参数不能为数组和对象

路由的Props配置

【注意】

一般组件和路由组件传参的区别

路由的_replace属性

push【默认】
replace【替换】

【编程式导航】

出了routerlink进行跳转还有编程式路由导航

什么时候进行编程式导航
- 需要再某个条件下跳转

路由重定向

Pinia【对比VUE2中vuex】【集中式状态数据管理】

【redux vuex pinia】

是vue的最新的状态管理工具，是vuex的替代品

手动添加pinia

官网：https://pinia.vuejs.org/zh/introduction.html

使用vite创建一个新的vue3项目
安装pinia到项目中

用vite安装时注意node的版本

案例

lovetalk.vue

<template>
    <div class="lovetalk">
        <button @click="getLoveTalk">hello</button>
        <ul>
            <li v-for="item in newsList" :key="item.id">{{ item.title }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import axios from 'axios';
import { nanoid } from 'nanoid';
const newsList = reactive([
    { id: '12423421', title: 'hel123' },
    { id: '1224231', title: 'h424el123' },
    { id: '1242341', title: 'he4243l123' },
]);
async function getLoveTalk() {
    // 下面的写法：连续解构赋值 + 重命名
    let {
        data: { content:title },
    } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json');
    //    nanoid 可以随机生成ID
    let obj = { id: nanoid(),title};
    console.log(obj);
    newsList.unshift(obj);
}
</script>

<style>
.lovetalk {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border: 1px solid black;
}
</style>

count.vue

<template>
  <div class="count">
    <h2>当前求和为：{{sum}}</h2>
    <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减 </button>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
let sum = ref(1)
let n = ref(1)
function add(){
    sum.value += n.value
}
function minus(){
    sum.value -= n.value
}
</script>

<style>
.count {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border: 1px solid black;
}
</style>

【注意】：引入了axios和nanoid【随机生成id】