vue3入门

vue3的响应式的原理

vue3使用proxy进行数据响应，vue2使用的是Object.defineProperty进行响应式

Object.defineProperty使用捕获不到删除和添加，可以捕获到读取和修改

    const person = {
        name: "小明",
        age: 14
    }
    
    let p = {}
    
    //向p添加name属性
    Object.defineProperty(p, "name", {
        //配置的属性变成true后，就可以进行删除和添加
        configurable: true,
        get() {
            //有人读取name时调用
            return person.name
        },
        set(value) {
            //有人修改name时调用
            person.name = value
        }
    })

proxy:代理的意思，可以捕获的数据的变化 (window自带的一个属性),它有两个参数，第一个代表要代理的属性，第二个参数是一个对象

• get(target,propName):读取时调用，target代表整个数据，propName代表修改的属性名
• set(target,propName，value):修改数据调用，target代表整个数据，propName代表修改的属性名，value代表修改的值
• deleteProperty(target,propName):删除时调用，target代表整个数据，propName代表修改的属性名

     const person = {
        name: "小明",
        age: 14
    }
    
    //让p代理person
    const p = new Proxy(person, {
        //有人读取时调用
        get(target, propName) {
            console.log(target, propName)
            //返回读取的数据
            return target[propName]
        }
        
        //有人修改数据调用
        set(target, propName, value) {
            console.log(target, propName)
            target[propName] = value
        }
        
        //有人删除时调用
        deleteProperty(target, propName) {
           //delete target[propName]的返回值 代表的是删除是否成功
          return  delete target[propName]
        }
    })

vue3中的setup

setup执行的时机在beforeCreate之前执行，在vue3中没有beforeCreate和 created这两个生命周期，而setup就相当于这两个的合并。
setup的参数有两个:

• props:值为对象，包含：组件外部传递过来，且组件内部声明接受了的属性。
• context:上下对象
  • attrs:值为对象，包含：组件外部传递过来但没有在props配置中声明的属性，相当于this.$attrs
  • slots:收到插槽内容，相当于this.$slots
  • emit:自定事件，相当于this.$emit

//接受父组件传来的值
props:["list"],
setup(props, context) {
    console.log(props.list)
    console.log(context.attrs);
    console.log(context.emit);
    console.log(context.slots);
},

vue3中定义数据ref，reactive

ref用来定义常量，reactive用来定义复杂数据类型

setup(){
    let a1=ref('111')
    let a2=reactive({
        sex:"男"
    })
    return{
        a1,
        a2
    }
}

watch事件监听

watch第一个参数代表的监听的值，第二函数有两个参数newValue（新值），oldValue（旧值）

setup() {
    let obj = reactive({
      sex: "男",
      age: 12,
      data: {
        sum: 2,
      },
    });
    watch(
      () => obj.age,
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
        if (newValue == 15) {
          obj.style = "你好";
        } else {
          delete obj.style;
        }
      }
    );

  },

computed计算属性

let comp = computed(() => {
  if (obj.age < 16) {
    return "未成年";
   } else {
     return "成年";
  }
 });