vue3学习简单记录

一、vue2和vue3的简单的比较

Vue2.0

首先vue2中的数据是通过Object.defineProperty去处理的，对于new Vue 配置项中的data，将其放置在vm._data中，对象引用类型操作同一地址，遍历data，取到属性key，Object.defineProperty（data,key,{}）然后进行一系列处理。

考虑性能问题，重新定义数组的原型来达到响应式。
Object.defineProperty 无法检测到对象属性的添加和删除 。
由于Vue会在初始化实例时对属性执行getter/setter转化，所有属性必须在data对象上存在才能让Vue将它转换为响应式。
深度监听需要一次性递归，对性能影响比较大。

function defineReactive(target, key, value) {
   //深度监听
   observer(value);
 
   Object.defineProperty(target, key, {
     get() {
       return value;
     },
     set(newValue) {
       //深度监听
       observer(value);
       if (newValue !== value) {
         value = newValue;
 
         updateView();
       }
     }
   });
 }
 
 function observer(target) {
   if (typeof target !== "object" || target === null) {
     return target;
   }
 
   if (Array.isArray(target)) {
     target.__proto__ = arrProto;
   }
 //遍历对象取key
   for (let key in target) {
     defineReactive(target, key, target[key]);
   }
 }
 
 // 重新定义数组原型
 const oldAddrayProperty = Array.prototype;
 const arrProto = Object.create(oldAddrayProperty);
 ["push", "pop", "shift", "unshift", "spluce"].forEach(
   methodName =>
     (arrProto[methodName] = function() {
       updateView();
       oldAddrayProperty[methodName].call(this, ...arguments);
     })
 );
 
 // 视图更新
  function updateView() {
   console.log("视图更新");
 }
 
 // 声明要响应式的对象
 let data = {
   name: "一路向北",
   num: 1,
   info: {
     address: "北京" // 需要深度监听
   },
   nums: [666, 8788, 222]
 };
 
 // 执行响应式
 observer(data);

Vue3.0

这个版本中
那么vue3的Proxy算是这次Vue 3.0 最大的亮点,它不仅取代了Vue 2.0 的 Object.defineProperty 方法并且组建生成增快，减少一般的内存使用。

基于Proxy和Reflect，可以原生监听数组，可以监听对象属性的添加和删除。
不需要一次性遍历data的属性，可以显著提高性能。
因为Proxy是ES6新增的属性，有些浏览器还不支持,只能兼容到IE11 。

 const proxyData = new Proxy(data, {
   get(target,key,receive){ 
     // 只处理本身(非原型)的属性
     const ownKeys = Reflect.ownKeys(target)
     if(ownKeys.includes(key)){
       console.log('get',key) // 监听
     }
     const result = Reflect.get(target,key,receive)
     return result
   },
   set(target, key, val, reveive){
     // 重复的数据，不处理
     const oldVal = target[key]
     if(val == oldVal){
       return true
     }
     const result = Reflect.set(target, key, val,reveive)
     console.log('set', key, val)
     return result
   },
   deleteProperty(target, key){
     const result = Reflect.deleteProperty(target,key)
     console.log('delete property', key)
     console.log('result',result)
     return result
   }
 })

  // 声明要响应式的对象,Proxy会自动代理
 let data = {
   name: "一路向北",
   num: 1,
   info: {
     address: "北京" // 需要深度监听
   },
   nums: [666, 8788, 222]
 };

二、setup的加入就是为了让vue3使用组合式API（Composition API）。使用组合式API更符合大型项目的开发，通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑

<!-- 父组件 -->
<!-- 3.0版本这层 <div class="home">可以干掉！ -->
<template>
  <div class="home">
    <div @click="isShow=!isShow">开关</div>
    
    <HelloWorld v-if="isShow" :msg="msg" :num='num' @list='list'>
      <template v-slot:www>
        <div>slot插槽</div>
      </template>
    </HelloWorld>

    <div>
      计算属性:{{smallName}}
    </div>
    
  </div>
</template>
<script lang="ts">
//setup里面用的一些属性需要从vue中引入
import { defineComponent,computed,watchEffect,watch, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive, ref } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
  
  setup(){
    let obj={
      name:'张三',
      age:18,
      fun:{
        name:'王二',
        age:22
      }
    }

    //reactive针对引用类型对象类型、数组类型 通过proxy将目标对象 变成代理对象 
    let num=reactive(obj)
    let objkey = reactive({
      data:1,
    });

    // ref处理基本类型  number  string等
    let isShow=ref(true)
    let msg=ref(1)


    // 计算属性
    let smallName = computed(()=>{
          return num.name + '-' + num.age
        })

    // 监听属性

    // 你可以认为他们是同一个功能的两种不同形态，底层的实现是一样的。
    // watch- 显式指定依赖源，依赖源更新时执行回调函数
    // watchEffect - 自动收集依赖源，依赖源更新时重新执行自身
 
    //监听整个reactive对象：
      watch(objkey, (n, o) => {
        console.log('watch1:',n.data, o.data);
      });
 
    //监听某个属性：
      watch(
        [objkey, () => objkey.data],
        (n, o) => {
          console.log("watch2:", n, o);
        }
      );
    // watchEffect - 自动收集依赖源，依赖源更新时重新执行自身 
      watchEffect(() => {
        console.log('watchEffect',msg.value,objkey)
      })
    // 点击事件
    function list(item:string){
        msg.value+=1
        num.name='李四'
        num.fun.name='赵五'
        objkey.data+=1
        
    }
    //return抛出去，模板上才可用这些值
    return{
      isShow,
      num,
      msg,
      list,
      smallName,
      objkey
    }
  }
});
</script>

三、vue2与3的生命周期对比，以及vue3子组件props接收参数问题

// 子组件
<template>
  <div class="hello">
    
    <button @click="btn">子组件点击按钮</button>
    <h4>子组件显示:{{ msg }}</h4>
    <a href="#">子组件显示:{{num.fun.name}}</a>
    <slot name="www"></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, toRefs } from 'vue'

export default defineComponent({
  name:'hollo',
  props:{
    msg:{
      type:Number,
      defalut:()=>''
    },
    num:{
      type:Object,
      defalut:{}
    }
  },

  // 也就说在 setup 函数中是无法使用 data 和 methods 中的数据和方法，而methods等可以使用setup中return出去的数据

  // setup(props,context) {
  setup(props,{attrs,emit,slots}) {
    //  1  props 是接受父向子传递的数据，并且需要子使用props接收所有的属性
    //  2  context是setup第二个参数，解构出attrs,emit,slots。  attrs获取当前组件中所有的属性 emit方法事件分发 slots 插槽,props中暴露的变量，就不会在context.attrs中暴露
    let { msg,num }=toRefs(props)
   
    console.log('3x','setup')

    console.log('props',props)
    console.log('attrs',attrs)
    console.log('slots',slots)
    console.log('msg',msg)

    const btn=()=>{
      emit('list',msg)
    }

    onBeforeMount(()=>{
      console.log('3x挂载前----onBeforeMount')
    })
    onMounted(()=>{
      console.log('3x挂载后----onMounted')
    })
    onBeforeUpdate(()=>{
      console.log('3x更新前----onBeforeUpdate')
    })
    onUpdated(()=>{
      console.log('3x更新后----onUpdated')
    })
    onBeforeUnmount(()=>{
      console.log('3x销毁钱----onBeforeUnmount')
    })
    onUnmounted(()=>{
      console.log('3x销毁后----onUnmounted')
    })
    return{
      btn
    }
  },


  beforeCreate(){
    console.log('2x---beforeCreate')
  },
  created(){
    console.log('2x---created')
  },
  beforeMount(){
    console.log('2x---beforeMount')
  },
  mounted(){
    console.log('2x---mounted')
  },
  beforeUpdate(){
    console.log('2x---beforeUpdate')
  },
  updated(){
    console.log('2x---updated')
  },
  beforeUnmount(){
     console.log('2x---beforeDestroy')
  },
  unmounted(){
    console.log('2x---destroyed')
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
  text-decoration: none;
}
.hello{
  margin-top: 10px;
}
</style>

1、生命周期打印结果下图👇🏻

image.png

2、接下来我们在看看vue3里面的props的使用

1、父组件里面引入子组件，子组件上有msg是字符串和num是对象、 一个事件list、一个slot插槽

    <HelloWorld v-if="isShow" :msg="msg" :num='num' @list='list'>
      <template v-slot:www>
        <div>slot插槽</div>
      </template>
    </HelloWorld>

  let obj={
    name:'张三',
    age:18,
    fun:{
      name:'王二',
      age:22
    }
  }
  let count=1
  let isShow=ref(true)

  let msg=ref(count)
  let num=reactive(obj)

2、子组件里接收父组件的数据

<script lang="ts">
import { defineComponent,reactive, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, toRefs } from 'vue'

export default defineComponent({
name:'hollo',
//这地方接收方式和vue2一样用props接收
//注意：！ 我们父组件传过来的msg和num如果在这接收了，那么setup内的attrs里面是看不到msg和num，
props:{
  msg:{
    type:Number,
    defalut:()=>''
  },
  num:{
    type:Object,
    defalut:{}
  }
},

// setup(props,context) {
setup(props,{attrs,emit,slots}) {
  //  1  props 是接受父向子传递的数据，并且需要子使用props接收所有的属性
  //  2  context  attrs获取当前组件中所有的属性 emit方法事件分发 slots 插槽,props中暴露的变量，就不会在context.attrs中暴露
  let { msg }=toRefs(props)
  // 注：setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数
  // console.log('3x','setup')

  console.log('props',props)
  console.log('attrs',attrs)
  console.log('slots',slots)
  console.log('msg',msg)

  const btn=()=>{
    emit('list',msg)
  }

  return{
    btn
  }
},


})
</script>