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 语法部分
生命周期
| vue2 | vue3 |
|---|---|
| beforeCreate | setup |
| created | setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestory | onBeforeUnmount |
| destoryed | onUnmounted |
路由
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元素
import { ref } from "vue";
const root = ref(null);
onMounted(() => {
console.log(root.value) //dom元素
}),
- ref获取v-for中dom元素
-
{{ item }}
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
在 立即触发回调函数
defineExpose
使用