【Vue3】Vue3核心内容（上）

Object.defineProperty(data,'count',{
  get(){},
  set(){}
})

const p = new Proxy(person,{
            // 有人读取p的某个属性时调用
            get(target,propName){
                console.log(`有人读取了p身上的${propName}属性`,target,propName);
                return Reflect.get(target,propName)
            },
            // 有人修改p的某个属性、或给p追加某个属性时调用
            set(target,propName,value){
                console.log(`有人修改了p身上的${propName}属性，我要去更新页面`);
                return Reflect.set(target,propName,value)
            },
            // 有人删除p的某个属性时调用
            deleteProperty(target,propName){
                console.log(`有人删除了p身上的${propName}属性，我要去更新页面`);
                return Reflect.deleteProperty(target,propName)
            }
        })

import { reactive,computed } from "vue";
setup() {
        let person = reactive({
            firstName:"张",
            lastName:"三"
        })
        // 计算属性--简写（没有考虑计算属性被修改的情况）
         person.fullName = computed(()=>{
             return person.firstName + '-' + person.lastName
         })
        // 计算属性--完整写法（考虑读和写）
        person.fullName = computed({
            get(){
                return person.firstName + '-' + person.lastName
            },
            set(value){
                const nameArr= value.split('-')
                person.firstName = nameArr[0]
                person.lastName = nameArr[1]
            }
        })

setup(){
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = reactive({
            name:"张三",
            age:"18",
            Job:{
                j1:{
                    salary:20
                }
            }
        })
        //情况一：监视ref所定义的响应式数据
      /*   watch(sum,(newValue,oldValue)=>{
            console.log('sum变了',newValue,oldValue);
        },{immediate:true}) */
        // 情况二：监视ref定义的多个响应式数据
       /*  watch([sum,msg],(newValue,oldValue)=>{
            console.log('msg变了',newValue,oldValue);
        },{immediate:true}) */
        // 情况三:监视reactive定义的一个响应式对象,
        // 注意：1.此处无法正确的获取oldValue
        //       2.强制开启了深度监视（deep配置无效）
        /* watch(person,(newValue,oldValue)=>{
            console.log('person变化了',newValue,oldValue);
        },{deep:false}) */
        // 情况四：监视reactive定义的一个响应式数据的某个属性
        /* watch(()=>person.age,(newValue,oldValue)=>{
            console.log('perosn的age变了',newValue,oldValue);
        }) */
        // 情况五：监视reactiva定义的一个响应式数据的某些对象
      /*   watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
            console.log("person的name或者age变了",newValue,oldValue);
        }) */
        // 特殊情况
        /* watch(()=>person.Job,(newValue,oldValue)=>{
            console.log("person的job变了",newValue,oldValue);
        },{deep:true})
        //由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效 */

//watchEffect所指定的回调中的数据只要发生变化，则直接重新执行回调
watchEffect(()=>{
    const x1 = sum.value
    const sa = person.Job.j1.salary
    console.log('watchEffect执行了',x1,sa);
 })  //监视sum 和person.Job.j1.salary的数值