vue3的优势

胡小拐
349 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路

1、Vue3的生态与优势

   1-1、Vue3的社区生态：

  •  社区生态 - 逐步完善
  • 整体优化 - 性能优化/TS支持优化/组合式API加持
  • 市场使用 - 部分技术选型激进的公司已经在生产环境使用了vue3

 1-2、Vue3的整体优化

  1. 性能提升
  •   首次渲染更快
  • diff算法更快
  •  内存占用更少
  •  打包体积更小 
  1. 更好的Typescript支持
    3. Composition API （重点）

2、组合式API

2-1、setup入口函数

setup 函数在beforeCreate生命周期钩子执行之前执行，实例还没生成，没有this

代码演示：

export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}

2-2、响应式API - ref

作用： ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象

简单来说，给ref传入一个初始数据，返回给你一个响应式数据。vue2中在data中定义数据，vue3使用ref来定义数据

使用步骤：

  1. 从vue中导入ref的包
  2. 在steup调用ref并传入初始数据
  3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
  4. 在setup函数中使用ref需要加上.value进行访问，模板中不需要加.value
<template>
  <div>{{ money }}</div>
  <button @click="changeMondy">改值</button>
</template>
 
<script>
import { ref } from 'vue'
export default {
  setup() {
    let money = ref(100)
    console.log(money.value)
    return {
      money
    }
  }
}
</script>

2-3、 响应式API - computed

使用步骤：

  1. 从vueu框架中导入computed
  2. 在setup函数中执行computed函数，并传入一个函数，在函数中计算公式
  3. 接受computed的返回值，并return出去
<template>
  {{ list }}
  {{ filterList }}
  <button @click="changeList">change list</button>
</template>
 
<script>
import { computed, ref } from 'vue'
export default {
  setup() {
    const list = ref([1, 2, 3, 4, 5, 6])
    // 输入大于2的数字
    const filterList = computed(() => {
      return list.value.filter(item => item > 2)
    })
    // 修改list的函数
    function changeList() {
      list.value.push(6, 7, 8)
    }
    return {
      list,
      filterList,
      changeList
    }
  }
}
</script>

2-4、响应式API - watch

作用：基于响应式的数据执行回调，没有返回值，和vue2中的watch基本一致.他又三个参数（前两个为函数，最后一个为配置对象）

使用步骤：

  1. 从vue中导入watch

  2. 在setup函数中执行watch函数开启对响应数据的监听

  3. 使用watc可传入三个参数

    1. 第一个参数为函数，return的结果就是你需要监听的数据项
    2. 第二个参数为响应式的数据变化之后执行回调函数
    3. 第三个参数为参数对象，可以设置立即侦听，深度监听
<template>
  {{ age }}
  <button @click="age++">change age</button>
</template>
 
<script>
import { ref, watch } from 'vue'
export default {
  setup() {
    const age = ref(18)
    watch(() => {
      return age.value
    }, () => {
      // 数据变化之后的回调函数
      console.log('age发生了变化')
    })
    return {
      age
    }
  }
}
</script>

深度监听并开启立即执行和深度监听

  {{ age }}
  <button @click="age++">change age</button>
</template>
<script>
import { ref, watch } from 'vue'
export default {
  setup() {
    const age = ref(18)
    watch(() => {
      // 返回你想要监听的响应式属性(ref产生的对象必须加.value)
      return age.value
    }, () => {
      // 数据变化之后的回调函数
      console.log('age发生了变化')
    },{ 
immediate: true,
deep:true})
    return {
      age
    }
  }
}
</script>

3、生命周期函数

要想了解vue3中的生命周期首先得回顾下vue的生命周期流程，下面我放置了一张vue官网的生命周期流程图

应用 & 组件实例 | Vue.js

3-1、 在 setup 函数中使用生命周期钩子函数

使用步骤：

  1. 先从vue中导入以on打头的生命周期钩子函数
  2. 在setup函数中调用生命周期函数并传入回调函数
  3. 生命周期钩子函数可以调用多次
<template>
  <div>生命周期函数</div>
</template>
 
<script>
import { onMounted } from 'vue'
export default {
  setup() {
    // 时机成熟 回调函数自动执行
    onMounted(() => {
      console.log('mouted生命周期执行了')
    })
    onMounted(() => {
      console.log('mouted生命周期函数又执行了')
    })
  }
}
</script>

3-2、vue3对应vue2的生命周期钩子函数：

选项式API下的生命周期函数使用 组合式API下的生命周期函数使用

  • beforeCreate不需要（直接写到setup函数中）
  • created 不需要（直接写到setup函数中）
  • beforeMount onBeforeMount
  • mounted onMounted
  • beforeUpdate onBeforeUpdate
  • updated onUpdated
  • beforeDestroyed onBeforeUnmount
  • destroyed onUnmounted

3-3、生命周期钩子函数使用场景

生命周期钩子函数应用场景
created发送ajax请求 / 挂载共用属性
mounted发送ajax请求 / 依赖于dom的业务，比如地图，图表
destroyed销毁操作，比如定时器

4、组件通信

在vue3的组合式API中，父传子的基础套路完全一样，基础思想依旧为：父传子是通过prop进行传入，子传父通过调用自定义事件完成

子传父实现步骤：

  1. setup函数提供俩个参数，第一个参数为props，第二个参数为一个对象context
  2. props为一个对象，内部包含了父组件传递过来的所有prop数据，context对象包含了attrs，slots， emit属性，其中的emit可以触发自定义事件的执行从而完成子传父 父组件
    //传入自定义属性
  <son :msg="msg" @get-msg="getMsg"></son>
</template>
 
<script>
import { ref } from 'vue'
import Son from './components/son'
export default {
  components: {
    Son
  },
  setup() {
    const msg = ref('this is msg')
    function getMsg(msg) {
      console.log(msg)
    }
    return {
      msg,
      getMsg
    }
  }
}
</script>

子组件：

<template>
  <div>
    {{msg}}
    <button @click="setMsgFromSon">set</button>
  </div>
</template>
 
<script>
export default {
  props: {
    msg: {
      type: String
    }
  },
  对context进行结构， 拿到emit方法
  setup(props,{emit}) {
    function setMsgFromSon(){
      emit('get-msg','这是一条来自子组件的新的msg信息')
    }
    return {
      setMsgToSon
    }
  }
}
</script>

5、TemplateRef获取dom元素

  1. 使用ref函数传入null创建 ref对象 => const hRef = ref(null)
  2. 模板中通过定义ref属性等于1中创建的ref对象名称建立关联 => <h1 ref="hRef"></h1>
  3. 把hRefreturn出去
  4. 使用 => hRef.value
<template>
  <h1 ref="h1Ref">我是普通dom标签</h1>
  <ref-component ref="comRef"></ref-component>
</template>
 
<script>
import { onMounted, ref } from 'vue'
import RefComponent from '@/components/RefComponent'
export default {
  components: {
    RefComponent
  },
  setup() {
    const h1Ref = ref(null)
    const comRef = ref(null)
    onMounted(() => {
      console.log(h1Ref.value)
      console.log(comRef.value)
    })
    // 必须return
    return {
      h1Ref,
      comRef
    }
  }
}
</script>

6.vue3中废弃的语法

1.实例方法$on移除

2.过滤器filter移除

3..sync语法移除


avatar
文章
阅读
粉丝