2021-05-14

Vue3新特性之续集（生命周期函数、父子通信、provide、inject、传递响应式数据）

生命周期函数

使用步骤：

1. 先从vue中导入以on打头的生命周期钩子函数
2. 在setup函数中调用生命周期函数并传入回调函数
3. 注：生命周期钩子函数可以调用多次
   代码实例

<template>
  <div>生命周期函数</div>
</template>

<script>
import { onMounted } from 'vue'
export default {
  setup() {
    // 时机成熟 回调函数自动执行
    onMounted(() => {
      console.log('mouted生命周期执行了')
    })
  }
}
</script> 

父子通信（组合式api下的父子通信）

父传子是通过prop进行传入，子传父通过调用自定义事件完成
使用步骤：

1. setup函数提供俩个参数，第一个参数为props，第二个参数为一个对象context
2. props为一个对象，内部包含了父组件传递过来的所有prop数据，context对象包含了attrs，slots， emit属性，其中的emit可以触发自定义事件的执行从而完成子传父

father.vue

<template>
  <son :name="name" @get-msg="getMsg"></son>
</template>

<script>
import { ref } from 'vue'
import Son from './components/son'
export default {
  components: {
    Son
  },
  setup() {
    const name = ref('cp')
    function getMsg(msg) {
      console.log(msg)
    }
    return {
      name,
      getMsg
    }
  }
}
</script>

son.vue

<template>
  <div>
    {{name}}
    <button @click="setMsgToSon">set</button>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String
    }
  },
  emits: ['get-msg'], // 申明当前组件触发的自定义事件
  setup(props,{emit}) {
    console.log(props.name)
    function setMsgToSon(){
      emit('get-msg','这是一条来自子组件的msg信息')
    }
    return {
      setMsgToSon
    }
  }
}
</script>

provide和inject 配合来简化完成跨层级传递数据

实现步骤：

1. 顶层组件在setup方法中使用provide函数提供数据
2. 任何底层组件在setup方法中使用inject函数获取数据
   代码实例：

爷爷组件.vue

<template>
  <father></father>
</template>

<script>
import Father from '@/components/Father'
import { provide } from 'vue'
export default {
  components: {
    Father
  },
  setup() {
    let name = '柴柴老师'
    // 使用provide配置项注入数据 key - value
    provide('name', name)
  }
}
</script> 

孙子组件.vue

<template>
  我是子组件
  {{ name }}
</template>

<script>
import { inject } from 'vue'
export default {
  setup() {
    const name = inject('name')
    return {
      name
    }
  }
}
</script>

传递响应式数据

provide默认情况下传递的数据不是响应式的，也就是如果对provide提供的数据进行修改，并不能响应式的影响到底层组件使用数据的地方，如果想要传递响应数据也非常简单，只需要将传递的数据使用ref或者reactive生成即可
app.vue

<template>
  <father></father>
  <button @click="changeName">change name</button>
</template>

<script>
import Father from '@/components/Father'
import { provide, ref } from 'vue'
export default {
  components: {
    Father
  },
  setup() {
    // 使用ref转换成响应式再传递
    let name = ref('柴柴老师')
    function changeName(){
      name.value = 'pink'
    }
    provide('name', name)
    return {
      changeName
    }
  }
}
</script> 

vuex
使用场景: 多组件共享全局的状态 用户信息
基础使用形式:
state
mutation 修改state的唯一方式 必须是同步的
action 封装异步操作 最终还需要提交mutation

核心本质：1.响应式数据(state) 2.修改数据的方法(mutation)

通过provide和inject模拟小型的vuex功能

实现步骤：

1. 在顶层组件使用provide函数提供响应式数据name
2. 在顶层组件使用provide函数提供修改响应式数据name的方法
3. 在Foo组件和Bar组件中，分别通过inject函数把name和修改name的方法获取到
4. 给按钮绑定点击事件，调用修改name的方法
   代码实例：
   app.vue

<template>
  <bar />
  <foo />
</template>

<script>
import Foo from './components/Foo'
import Bar from './components/Bar'
import { provide, ref } from 'vue'
export default {
  components: {
    Foo, Bar
  },
  setup() {
    let name = ref('柴柴老师')
    function setName(newValue) {
      name.value = newValue
    }
    provide('name', name)
    provide('setName', setName)
  }
}
</script>

Foo.vue

<template>
  <div>
    我是Foo组件
    {{ name }}
    <button @click="setName('foo')">click</button>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  setup() {
    const name = inject('name')
    const setName = inject('setName')
    return { name, setName }
  }
}
</script>

Bar.vue

<template>
  <div>
    我是bar组件
    {{ name }}
    <button @click="setName('bar')">click</button>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  setup() {
    const name = inject('name')
    const setName = inject('setName')
    return { name, setName }
  }
}
</script>

模板中ref的使用

1. ref + 普通dom标签 获取真实dom对象
2. ref + 组件标签 获取组件实例对象
3. ref + v-for 获取由dom对象（实例对象）组成的数组 （不经常使用）
   实现步骤：
4. 使用ref函数传入null创建 ref对象 => const hRef = ref(null)
5. 模板中通过定义ref属性等于1中创建的ref对象名称建立关联 =>

6. 使用 => hRef.value
   代码实例：

<template>
  <h1 ref="h1Ref">我是普通dom标签</h1>
  <ref-comoonent ref="comRef"></ref-comoonent>
</template>

<script>
import { onMounted, ref } from 'vue'
import RefComoonent from '@/components/RefComponent'
export default {
  components: {
    RefComoonent
  },
  setup() {
    const h1Ref = ref(null)
    const comRef = ref(null)
    onMounted(() => {
      console.log(h1Ref.value)
      console.log(comRef.value)
    })
    // 必须return
    return {
      h1Ref,
      comRef
    }
  }
}
</script>