vue3.0开发知识点vue3.0新特性更快虚拟dom和diff算法冲重写优化slots的生成静态树提升静态属性提升基于

vue3.0开发知识点

vue3.0新特性

更快

虚拟dom和diff算法冲重写
优化slots的生成
静态树提升
静态属性提升
基于proxy的响应式数据

Composition Api 组合Api

基于reactivity(响应式)的思想进行组件构建，将逻辑封装到函数中，方便的调用和组合

Teleport 传入

此功能，可以帮我们把全屏组件移植到vue app节点之外，而不需要在 UI 界面上修改其他组件样式，方便实现全屏蒙层、浮层弹窗等效果

Fragments 碎片

在vue模板中可以有多个同级的根元素

<template>
  <div class="top">头部</div>
  <div class="center">中间区域</div>
  <div class="bottom">底部</div>
</template>

Vue3.0中暴露的方法

reactive

该函数传入一个对象，里面的数据会变成响应式的数据。类似于react中的state，只不过state更新的时候不需要setState一遍了

ref

ref也是创建响应式数据的，区别在于要用xxx.value才能访问到数据值，更推荐用ref，然后配合reactive使用

toRefs

toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据

isRef

用来判断某个值是否是ref创建出来的响应式对象

watch

监听属性的变化

computed

该函数用来创造计算属性，和过去一样，它返回的值是一个ref对象

provide inject

组件之间传递参数（包括跨层级），可以取代props

getCurrentInstance

获取当前组件示例，相当于this

onMounted

组件渲染完成

onUpdated

组件更新完成

onUnmounted

组件卸载完成

vue3.0生命周期

vue3.0生命周期与2.0相比，去掉了部分，修改了已有生命周期的写法，只能在setup中使用，setup只执行一次

1.去掉beforeCreate和created，使用setup()

beforeMount 换成 onBeforeMount
mounted 换成 onMounted
beforeUpdate 换成 onBeforeUpdate
updated 换成 onUpdated
beforeDistory 换成 onBeforeUnmount
distoryed 换成 onUnmounted
errorCaptured 换成 onErrorCaptured

vue3.0中的setup方法

setup方法只执行一次，其接收两个参数props（传递的属性），context（用来定义上下文）

export default {
  props: {
    title: String
  },
  setup（props， context）{
    const { title } = props
    // context包括如下属性方法，在vue2.0中都需要通过this获取
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }
}

组件之间的交互

父传子：属性传递

<child :info="info"></child>
import { ref } from 'vue'
setup () {
  const info = ref('我是info')
}

<div>{{ info }}</div>
export default {
  props: {
    info: String
  }
}

父传子: provide 和 inject 可实现跨组件直接的交互

provide('title', '我是数据')

const title = inject('title')

子传父

<child @change="change"></child>
setup ()｛
　const change = (value) => {
    console.log(value)
  }
  return {
    change
  }
｝
<div @change="change"></div>
setup(props, { emit }) {
  const change = () => {
    emit('change','newValue')
  }
  return {
    change
  }
}

父子数据双向绑定，可以同时绑定多个值

<child v-model:foo="foo" v-model:zoo="zoo"></child>
import { ref } from 'vue'
setup ()｛
  const foo = ref('foo')
  const zoo = ref('zoo')
  return {
   foo,
   zoo
 ｝
}

<div>
  <span>{{ foo }}</span>
  <span>{{ zoo }}</span>
  <div @click="change">改变</div>
</div>
export default {
  props: {
    foo: String,
    zoo: String
  },
  setup(props, {emit}){
    const change = () => {
      emit('update:foo', 'newfoo')
      emit('update:zoo', 'newzoo')
    }
    return {
       change
    }
  }
}

computed计算属性

import { computed } from 'vue'
export default {
  props: {
   info: String
  },
  setup() {
   const newInfo = computed({
    get: () => props.info,
    set: value => { // 执行操作 }
   })
  }
}

directive自定义指令

路由传参

import { getCurrentInstrance } from 'vue'
setup() {
  const { ctx } = getCurrentInstance() 
  ctx.$router.push({
    path: '/list',
     query: {
       title: data.title
     }
  })
  ctx.$router.push({
    name: 'list',
    params: {
       title: data.title
    }
  })
}

import { getCurrentInstrance } from 'vue'
setup() {
  const { ctx } = getCurrentInstance()
  const title = ctx.$router.currentRoute.value.query.title
  const title = ctx.$router.currentRoute.value.params.title
}

watch方法

import { watch } from 'vue'
setup() {
  const count = ref(0)
  watch(count, (newVal, oldVal) => {
   // 执行
  })
  setTimeout(() => {
    conut.value++
  }, 2000)
}

通过ref获取dom元素

只需要保证html标签的ref属性值和创建的响应式数据值一致，就可以实现绑定关系

<div ref="myRef">我是dom</div>
import { ref } from 'vue'
setup() {
  const myRef = ref(null)
  setTimeout(() => {
    console.log(myRef.value)
  }, 2000)
  return {
    myRef
  }
}

路由缓存