小溪流

vite2 vue3.2 初始化项目

1、输入项目名字 2、选择vue 3、选择vue-ts

npm init vite@latest
  Done. Now run:

  cd vitevue32
  npm install
  npm run dev

安装router、pinia

npm install vue-router@4 -S
npm install pinia

在main.ts中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'

//创建pinia
const pinia=createPinia()
const app = createApp(App)

//挂载到vue实例
app.use(pinia)
app.use(router)
app.mount('#app')

pinia使用

1. 定义容器
2. 使用容器中的state
3. 修改state
4. 容器中的action的使用 在store文件夹下***.ts中

import { defineStore } from 'pinia'

//1.定义容器
//参数1：容器的id必须唯一，会把所有的容器挂载到根容器
//参数2：选项对象
//返回值：一个函数，调用得到容器实例
//pinia 把state数据都做了reactive处理，对结构数据通过storeToRefs做ref响应式代理
export const useUserStore = defineStore({
    id: 'user',
    //类似于组件中的data
    //1.必须是函数，为了在服务端渲染避免交叉感染；
    //2.必须是箭头函数，为了ts类型推导
    state: () => {
        return {
            count: 100
        }
    },
    //类似于组件中的computed，封装计算属性，还有缓存的功能
    //如果getters中使用this而不使用state，就必须手动指定函数的返回值类型，否则类型无法推导
    getters: {
        calculate(state){
            return state.count+10
        }
    },
    //类似于组件的methods，封装业务属性，修改state，
    actions: {
        changeState(num: number) {
            this.count = 2 + num
        }
    }
})

//2.使用容器中的state
//3.修改state
//4.容器中的action的使用

ref响应式

function ref(param) {
    const refValue = {
        get value() {
            console.log('get')
            return param
        },
        set value(newParam) {
            console.log('set')
            if (param === newParam) return;
            param = newParam
        }
    }
    return refValue
}
const oneRef = ref(1)
//设置值
//oneRef.value=2
console.log('ref的值为：', oneRef.value)

运行结果为：

node ref.js
get
ref的值为： 1

ts中的装饰器decorate 统一消息消息响应

const messageDecorator:ClassDecorator=(target:Function)=>{
    target.prototype.message=(content:string)=>{
        console.log('统一消息'+content)
    }
}

@messageDecorator
class LoginController{
    public login(){
        this.message('登录成功！')
    }
}

@messageDecorator
class UserController{
    public personal(){
        this.message('个人资料---')
    }
}

new LoginController().login()

new UserController().personal()

输出结果为：

统一消息登录成功！
统一消息个人资料---

自定义v-model

v-model 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件，父组件监听 input 事件中传递的 value 值，并存储在父组件 data 中；然后父组件再通过 prop 的形式传递给子组件 value 值，再子组件中绑定 input 的 value 属性即可。

vue异步渲染

$nextTick待DOM渲染完成再回调 vue异步渲染，data数据多次更改，最终只会渲染一次。

slot作用域