vue3学习

目录

一、组合API

1.1 setup函数

1.2 生命周期 

1.3 reactive函数

1.4 toRef函数 

1.5 toRefs函数 

1.6 ref函数 

1.7 知识运用案例 

1.8 computed函数

1.9 watch函数 

 1.10 ref属性

1.11 父子通讯 

1.12 依赖注入 

1.13 v-model语法糖 

---

#博学谷IT学习技术支持#

一、组合API

在vue3.0项目中将会使用 组合API 写法 

1.1 setup函数

<template>
  <div class="container">
    <h1 @click="say()">{
  { msg }}</h1>
  </div>
</template>
<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)  // undefined
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }

    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)  // Proxy {…}
  }
}
</script>

 总结： setup 组件初始化之前执行，它返回的数据和函数可在模版使用

1.2 生命周期 

<template>
  <div class="container">
    container
  </div>
</template>
<script>
import { onBeforeMount, onMounted } from 'vue'
export default {
  setup () {
    onBeforeMount(()=>{
      console.log('DOM渲染前',document.querySelector('.container'))  // null
    })
    onMounted(()=>{
      console.log('DOM渲染后1',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后2',document.querySelector('.container'))
    })
  },
}
</script>

 总结： 组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同

1.3 reactive函数

• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

<template>
  <div class="container">
    <div>{
  { obj.name }}</div>
    <div>{
  { obj.age }}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup () {
    // 普通数据
    // const obj = {
    //   name: 'ls',
    //   age: 18
    // }
    const obj = reactive({
      name: 'ls',
      age: 18
    })

    // 修改名字
    const updateName = () => {
      console.log('updateName')
      obj.name = 'zs'
    }

    return { obj ,updateName}
  }
}
</script>

 总结： 通常是用来定义响应式对象数据

1.4 toRef函数 

• toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

<template>
  <div class="container">
    {
  {name}} <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. 响应式数据对象
    const obj = reactive({
      name: 'ls',
      age: 10
    })
    console.log(obj)
    // 2. 模板中只需要使用name数据
    // 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
    // let { name } = obj 不能直接解构，出来的是一个普通数据
    const name = toRef(obj, 'name')
    // console.log(name)
    const updateName = () => {
      console.log('updateName')
      // toRef转换响应式数据包装成对象，value存放值的位置
      name.value = 'zs'
    }

    return {name, updateName}
  }
}
</script>
<style scoped lang="less"></style>

 使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。

1.5 toRefs函数 

• toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是
• 关联的

<template>
  <div class="container">
    <div>{
  {name}}</div>
    <div&