vue3使用知识点总结

一、vue3 项目搭建

npm 6.x

npm init vite@latest myvue3 --template vue
 
vue 3.2.26

使用 element plus ui 框架

npm i -S element plus

//全部引入
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
const Vue = createApp(App);
Vue.use(ElementPlus);

使用 scss

npm install --save-dev sass-loader
npm install --save-dev node-sass
npm install --save-dev sass

vite.config

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
    publicPath: './', //打包路径
    css: {
        //配置scss全局变量和方法
        preprocessorOptions: {
            scss: {
                additionalData: "@use './src/assets/scss/style.scss' as *;"
            }
        }
    },
    plugins: [vue()]
});

二、vu3 语法部分

生命周期

路由

import { useRoute,useRouter } from 'vue-router';
 
const router = useRouter();
const route = useRoute();
 

状态管理

import {useStore} from 'vuex';
 
const store = useStore();

reactive

返回对象的响应式副本

注意：
reactive 返回的对象，重新赋值丢失响应式
reactive 返回的对象不可以解构

const form = reactive({
    name: 'aa',
    age: 20
});
 
const { name, age } = form; //通过解构 此时name,age会丢失响应 要想让它具有响应式 需要通过toRefs处理
const { name, age } = toRefs(form); //此时name,age具有响应

ref

所有通过 ref 创建的数据 需要通过 xxx.value 取它的值, 在模板中无需通过.value。
可以简单地把 ref(obj) 理解为这个样子 reactive({value: obj})

import { ref } from "vue";
const count = ref(1);
 
console.log(cout.value);  //1

• ref获取单个dom元素

<div ref="root"></div>
import { ref } from "vue";
const root = ref(null);
onMounted(() => {
    console.log(root.value)  //dom元素
}),

• ref获取v-for中dom元素

<ul>
    <li :ref="setLiDom" v-for="(item, index) in state.list" :key="index">
        {{ item }}
    </li>
</ul>
import { ref, reactive } from "vue";
const state = reactive({
    list: [1, 2, 3, 4]
})
 
const refList = ref([]);
 
const setLiDom = (el) => {
    if(el){
        liItem.value.push(el);
    }
};
 
onMounted(() => {
    console.log(root.value)  //Proxy {0: li, 1: li, 2: li, 3: li}
}),

toRef 和 toRefs

• toRef 用来为源响应式对象上的某个 property 新创建一个 ref。

const state = reactive({
    foo: 1,
    bar: 2
});
 
//目的使state对象中的foo属性保持响应式连接，修改其中一个都会同步修改那个属性
const fooRef = toRef(state, 'foo');

• toRefs 将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。

//toRefs常用于 es6 的解构赋值操作,保持每个属性的都为响应式
setup(){
    let data = reactive({
        name: '张三',
        age: 18
    });
    return {
        ...toRefs(data)
    }
}

toRaw 、markRaw

通过toRaw获取到原始对象，改变原始对象的值会同时改变响应式对象的值，但不会更新视图

const foo = {}
const reactiveFoo = reactive(foo)
 
//reactiveFoo 和 foo 是引用的同一个地址
 
console.log(toRaw(reactiveFoo) === foo) // true

通过markRaw包裹的原始对象，使其永远不会转换为响应式对象，也就是说转换之后修改值并不会更新视图

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

unref

如果参数是一个 ref，则返回内部值，否则返回参数本身

let obj = ref({ a: 1, b: 2 });
 
let reult = isRef(obj) ? obj.value : obj;
//等价于
let reult = unref(obj);

shallowRef 和 triggerRef

setup() {
    //shallowRef创建一个比ref更浅的响应式对象，改变其属性值，不会触发监听
    const foo = shallowRef({
        a: 1111,
        b: 2222
    });
 
    setTimeout(() => {
        foo.value.a = 3333;
        triggerRef(foo); //需要手动触发才能改变a的值
    }, 2000);
 
    watchEffect(() => {
        console.log(foo.value.a); //1111  3333
    });
 
    return {
        foo
    };
}

defineProps 和 defineEmits

在