导读

setup、ref函数、reactive函数。

setup

组件中所用到的数据、方法、生命周期等 ，都要配置在setup中，其中setup函数有两种返回值：

• 若返回一个对象，则对象中的属性、方法，在模版中均可以直接使用。(常用）

  • <template>
      <h1>个人信息</h1>
      <!-- 对象中的属性可以直接在模版中使用 -->
      <h2>姓名:{{name}}</h2>
      <h2>年龄:{{age}}</h2>
      <button @click="sayHello">说话</button>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      setup() {
        //此处只是测试，不考虑响应式问题
        //数据
        let name = "zzl"
        let age = 16
        //方法
        function sayHello(){
          alert(`${name}+今年+${age}`)
        }
    
        //返回一个对象
        return{
          name,
          age:age,
          sayHello
        }
       }
    }
    </script>
    

• 若返回一个渲染函数：则可以自定义渲染内容。

  • import {h} from 'vue'
        export default{
          return ()=> h('h1','尚硅谷')
        }

     

setup注意点

• setup在beforeCreate之前执行一次，此时this是undefined
• setup的参数
  • props：值为对象，包含：组件外部传递过来且组件内部声明接受了的属性
  • context：上下文对象
    • attrs:值为对象，包含外部传递过来，但 没有在props配置中声明的属性。
    • slots：收到的插槽内容
    • emit：分发自定义事件的函数

App.vue

<template>
  <h1>父组件</h1>
  <Demo msg="zzl" @hello="showHelloMsg">
    <template v-slot:"slotName1">
      <span>内容</span>
    </template>
    <template v-slot:"slotName2">
      <span>内容</span>
    </template>
  </Demo>
</template>

<script>
import Demo from './components/Demo.vue'
export default {
  components: { Demo },
  name: 'App',
  setup() {
    function showHelloMsg(value){
      alert(`接受子组件传过来的值${value}`)
    }
    return{
      showHelloMsg
    }
  }
}
</script>

Demo.vue

<template>
  <h1>子组件</h1>
  <button @click="test">传值给父组件</button>
</template>

<script>
export default {
  name: 'Demo',
  props:['msg'],
//   emits:['hello']
  setup(props,context) {
    console.log(props) //Proxy {msg: 'zzl'}
    console.log(context.attrs)//值为对象，包含外部传递过来，但 没有在props配置中声明的属性

    console.log('收到的插槽内容',context.slots)
    function test(){
        context.emit('hello',3)
    }
    return{
      test
    }
    
   }
}
</script>

ref函数

• 创建一个包含响应式数据的引用对象
• js中操作 数九：xxx.value=?
• 模版中读取数据：不需要.value，直接{{属性名}}
• 接收的数据可以是基本类型、对象类型
  • 基本类型的数据：响应式依然靠Object.definProperty()的get与set完成的
  • 对象类型的数据：内部通过vue3封装的reactive函数完成的

<template>
  <h1>个人信息</h1>

  <!-- 解析时，会发现name是ref对象，所以会自动解析为name.value使用 -->
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>{{job.type}}</h2>
  <h2>{{job.time}}</h2>
  <button @click="changeInfo">改变</button>
</template>

<script>

import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
    //ref对象定义响应式数据引用对象 
    let name = ref("zzl")
    let age = ref(16)
    let job =ref({
      type:'前端工程师',
      time:'3年'
    })
    //方法
    function changeInfo(){
      name.value = 'wxl'
      age.value = 23
      job.value.type='前端开发工程师实习生'
      job.value.time = '0年'
    }

    //返回一个对象
    return{
      name,
      age,
      job,
      changeInfo
    }
    
   }
}
</script>

reactive函数

• 定义一个对象类型的响应式数据（基本类型不能使用它）
• const 代理对象 = reactive（源对象）接收一个 对象（或者数组），返回 一个代理对象（Proxy的实例对象）
• reactice定义的响应式数据是深层次的（不管藏的有多深）

<template>
  <h1>个人信息</h1>

  <!-- 解析时，会发现name是ref对象，所以会自动解析为name.value使用 -->
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>{{job.type}}</h2>
  <h2>{{job.time}}</h2>
  <h2>{{job.a.b.c}}</h2>
  <h2>{{hobby}}</h2>
  <button @click="changeInfo">改变</button>
</template>

<script>

import {reactive, ref} from 'vue'
export default {
  name: 'App',
  setup() {
    //ref对象定义响应式数据引用对象 
    let name = ref("zzl")
    let age = ref(16)
    let job =reactive({
      type:'前端工程师',
      time:'3年',
      a:{
        b:{
          c:666
        }
      }
    })
    let hobby = reactive(['sing','play'])
    //方法
    function changeInfo(){
      name.value = 'wxl'
      age.value = 23
      job.type='前端开发工程师实习生'
      job.time = '0年'
      job.a.b.c = 888
      // 在vue3中可以直接通过索引修改数组里的内容
      hobby[0]='say'
    }

    //返回一个对象
    return{
      name,
      age,
      job,
      changeInfo,
      hobby
    }
    
   }
}
</script>