Vue3.0

teleport

• Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。

<teleport to="#modals">
  <div>A</div>
</teleport>

<teleport to="body">
  <div>A</div>
</teleport>

eg:

当前modal组件一般挂载在父组件下，想让组件居中展示一般使用postion: fixed;来定位，使用teleport后可挂载在根节点下可使用postion: absolute;定位

ref/reactive/toRefs

• ref既可以为基础数据提供响应式，也可以为引用数据类型提供响应式
• ref通过.value改变当前引用对象的值

const useName = ref({ name: 'xxx' }) // { value: { name: 'xxx' } }
userName.value = { name：'yyy' }
const count = ref(0)
count.value = 1

• reactive一般为引用数据类型提供响应式
• ref与reactive区别

function useObj1() {
  const useName1 = reactive({ name: "xxx" });
  const updateName1 = () =>
    (useName1.name = useName1.name === "xxx" ? "yyy" : "zzz");
  return { useName1, updateName1 };
}

function useObj2() {
  let useName2 = reactive({ name: "xxx" });
  const updateName2 = () => (useName2 = { name: "ddd" });
  return { useName2, updateName2 };
}

function useObj3() {
  let useName3 = ref({ name: "xxx" });
  const updateName3 = () => (useName3.value = { name: "ddd" });
  return { useName3, updateName3 };
}

• toRefs为解构赋值数据提供响应式

let book = reactive({ title: 'xxx', name:＇yyy' })
const { title } = book // title无响应式
const { name } = toRefs(book) // name具有响应式

computed/watchEffect

• computed: 接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。或者，它可以使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

• watchEffect: 为了根据反应状态自动应用和重新应用副作用，我们可以使用 watchEffect 方法。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
• watchEffect与watch的区别
  1. watchEffect不需要指定监听的属性，依赖是自动收集的
  2. watch可以收集到变更前后的value，而watchEffect不行
  3. watchEffect会在组件初始化时执行一次，用以收集依赖，同computed，而watch不需要
  4. watchEffect可清除副作用

export default {
  setup() {
    const keyword = ref('')
    const asyncPrint = val => {
      return setTimeout(() => {
        console.log('user input: ', val)
      }, 1000)
    }

    watchEffect(
      onInvalidate => {
        const timer = asyncPrint(keyword.value)
        onInvalidate(() => clearTimeout(timer))
      },
      {
        flush: 'post' // 默认'post'，同步'sync'，'pre'组件更新之前
      }
    )

    return {
      keyword
    }
  }
}

composition API

• setup()

1. props & context
2. lifecycle

选项 API	Hook inside inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

1. provide/inject

• 根组件

setup() {
  const location = ref('North Pole')
  const geolocation = reactive({
    longitude: 90,
    latitude: 135
  })
  provide('location', location)
  provide('geolocation', geolocation)
}

• 孙组件

setup() {
  const userLocation = inject('location', 'The Universe')
  const userGeolocation = inject('geolocation')

  return {
    userLocation,
    userGeolocation
  }
}

typescript

• 在vue2.0中，一般把组件改写成tsx形式来提供ts类型检查
• Vue3.0可使用Vue cli添加ts支持

npm install --global @vue/cli@next
vue create my-project-name
vue add typescript

• vue3.0中，只需要在script标签上添加lang=ts即可支持ts类型检查

<script lang="ts">
  let str: string = 'str'
  str = 123 // error
</script>

项目

仿jd商城h5项目

PC后台管理项目

参考文档

中文文档

英文文档