Vue3知识点

1、ref和reactive的区别。

　　①  js中对ref定义的值读取、修改，需要加.value，可以用插件↓来简单使用

      ②  ref修改引用可以直接修改，react不能修改引用对象，只能使用 Object.assign修改对象内容

      ③  基本类型建议使用ref，若需要一个响应式对象且层级不深ref和reactive都可以。如果响应式对象层级比较深，推荐使用reactive。表单比较多、回显等使用reactive。

　　     因为一堆.value不太合适

2、toRefs接收一个reactive定义的对象、toRef单个属性去转换成ref

let person = reactive({name:'张三':age:18})

let {age,name} = toRefs(person)
// 此时 age、name为  响应式的

console.log(age.value)
// 修改 age.value +=1; person中的 age也同时发生变化

let age1 = toRef(person,'age')
// 此时age1是响应式的

congsole.log(age1.value)

3、computed有缓存、普通方法获取结果没缓存，页面用几次调几次

// 一般写法
let fullName = computed(()=>{
    return name1.value + name2.value;
})

// 支持修改计算属性的写法
let fullName = compuetd({
    get(){
        return name1.value + name2.value;
     },
     set(val) {
         let [str1,str2] = val.split('-');
        name1.value = str1;
        name2.value = str2;
     }
}) 

4、watch四种用法：1、ref所定义的数据 2、reactive定义的数据3、函数返回的值4、包含以上的数组 

　　

// 监听ref基础数据并停止

let sum = ref(8);
let stopWatch = watch(sum,(newValue,oldValue)=>{
     if (newValue>10) {
       stopWatch(); // 停止监听 
    }
});


let person = ref({name:'张三',age:18});

// 只能监听到person对象的引用是否发生变化
watch(person,(newValue,oldVale)=>{
    
});

// 开启深度监听，这样直接可以监事 person的每个属性编号
//  immediate:true 首次给person赋值也能监听到
watch(person,(newValue,oldVale)=>{
    
},{deep:true,immediate:true});

let person2 = reactive({name:'李四',age:20});
// 监听reactive对象的数据，默认开启深度监视且无法自动关闭
watch(person2,(newValue,oldValue)=>{
   
});

监听对象的属性

// 监听函数返回的值
let person = ref({name:'张三',old:18,car:{c1:'奥迪',c2:'宝马'}});
watch(()=>person.name,(newValue,oldValue)=>{

});

// 监听属性值是对象时，要加深度监听才能监听到对象内容变化
watch(()=>person.car,()=>{},{deep:true});

5、watchEffect，立即会执行、并全自动监视相关条件（watch需要指定监听的属性、watchEffect不需要指定）

let temp = ref(0);
let height = ref(10);

watchEffect(()=>{
   if (temp.value>60||height>50) {
      // 触发了
   }
})

6、接口、泛型、自定义类型。 export type Persons = PersonInter[] 也可以.

 7、传 props