- vue3基础语法
export default{
setup{
return{}
}
}
2 响应式基础类型数据 ref，主要 用于字符串，数字，布尔，使用需要引入
import {ref} from 'vue'
const name = ref('zhangsan')
3 响应式复杂类型数据 reactive，主要 用于数组，对象，多维数组,使用需要引入（基本类型是不能使用该引用）
import {reactive} from 'vue'
const name = reactive({'name':'zhangsan'})
4 toRef:也是可以创建一个响应式数据，本质是拷贝粘贴一份数据，脱离了原数据的交互。
ref 函数是将对象中的属性变成响应式数据，修改响应式数据不会影响到原数据，但是会更新视图层
toRef的本质是引用，与源数据有交互，修改响应式数据会影响到原数据，但是不会更新视图层
5 toRefs： 用于批量设置多个数据为响应式数据。与源数据有交互，修改响应式数据会影响到原数据，但是不会更新视图层
6 计算属性 computed
const res = computed(()=>{
return "string"
})
7 监听 watch
const count = ref(0);
watch(count,(newValue,oldValue)=>{
console.log();
})
const res = reactive({name:'berger',age:18})
watch(()=>res.name,(newValue,oldValue)=>{
console.log();
})
8 传值（自动传值）
父传子组件：
父组件--provide
const res = reactive({name:'berger',age:18})
provide('key',res)
子组件--inject 自动传值
const res = inject('key')
8 传值（点击传值）
父组件
<template>
// 子组件
<son_zujian ref="val">
</template>
<script>
setup(){
const val = ref()
const res = reactive({name:'berger',age:18})
function btn(){
val.value.getValue(res ); // getValue 子组件定义的方法
}
return {val,btn}
}
</script>
子组件--
<script>
setup(){
function getValue(val){
//业务逻辑
console.log(val)
}
}
</script>
9 vuex
npm install vuex@next --save
//引入
import {userStore} from 'vuex'
10 生命周期函数
onBeforeMount -- 在挂载开始之前被调用
onMounted -- 组件挂载时被调用
onBeforeUpdate -- 数据更新是调用
onUpdate --数据更改导致的虚拟dom重新渲染 在这之后会调用该钩子
onBeforeUnmount --在卸载组件实例之前调用
onUnmount --卸载组件实例后调用
onErrorCaptured --当捕获到一个来自子孙组件错误是被调用
vue应用程序4个主要时间
1 创建-在组件创建是执行
2 挂载-dom被挂载时执行
3 更新-当相应数据被修改是执行
4 销毁-在元素被销毁钱执行
