【composition-api】学习第二步函数声明及监听事件-只针对工作不针对学习

1:函数声明及监听事件

<template>
  <div>
    <span>{{ age }}</span>
    <button @click="ageAddition">点击我变化</button>
    <我是子组件 ref='操作子组件的数据'/>
  </div>
</template>
<script>
import { watch, ref, reactive, watchEffect } from '@vue/composition-api'
import 我是子组件 from '子组件地址'
export default {
  // 组件名称
  name: '',
  props: {},
  emits: [],  // 说明发送的自定义事件名这是vue3的使用方法 vue2可以不用
  components: {
    我是子组件
  },
  // props:父组件传的数据 context:上下文,相当于vue2中的this,
  setup () {
    //定义的变量函数必须return出去
    const age = ref(10)
    const nameObject = reactive({
      name: '男',
      handsome: 'no'
    })
    const 操作子组件的数据 = ref(null)
    //我喜欢用具名函数
    function ageAddition () {
      age.value++
      //reactive声明的也是响应式,但它不需要.value
      nameObject.handsome = 'yes'
      //可以使用这种方式直接操控子组件的函数,变量等
      操作子组件的数据.value.getList()
    }
    //watchEffect会自动收集依赖,一旦依赖变化就会触发
    watchEffect(() => {
      console.log(age.value);
    })
    watch(
      nameObject,
      () => {
        console.log('我变帅了');
      },
      //深度监听
      { deep: true }
    )
    return {
      age,
      操作子组件的数据,
      ageAddition
    }
  },
}
</script>
<style scoped>
</style>