Vue3:ref函数和reactive函数和setup函数

发布时间:2023年12月17日

ref基本用法

一、ref函数基本用法:
作用:定义一个响应式的数据
语法:const xxx = ref(initValue),创建一个包含响应式数据的引用对象(reference对象简称ref对象)
备注:
1. 基本数据类型:响应式依然是靠Object.defineProperty()的get和set完成的
2. 对象数据类型:内部求助了Vue3.0中的一个新函数 ==> reactive函数

处理基本类型和对象类型
<template>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <div>{{ job.industry }}</div>
  <div>{{ job.salary }}</div>
  <button @click="change">按钮</button>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      industry: '前端',
      salary: '30k'
    })
    function change() {
      console.log(name, age);
      name.value = '李四'
      age.value = 28
      job.value.industry = 'UI'
      job.value.salary = '60K'
    }

    return {
      name,
      age,
      job,
      change
    }
  }
}
</script>


reactive基本用法

reactive函数
作用:定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
语法:const 代理对象 = reactive(源对象)接收一个对象或数组,返回一个代理对象(proxy对象)
reactive定义的响应式数据是深层次的
内部基于ES6的Proxy实现,通过代理对象操作源对象内部数据进行操作

代码:
<template>
  <div>{{ person.name }}</div>
  <div>{{ person.age }}</div>
  <div>{{ person.job.industry }}</div>
  <div>{{ person.job.salary }}</div>
  <button @click="change">按钮</button>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const person = reactive({
      name: '张三',
      age: 18,
      job: {
        industry: '前端',
        salary: '30k'
      }
    })

    function change() {
      person.name = '李四'
      person.age = 28
      person.job.industry = 'UI'
      person.job.salary = '60K'
    }

    return {
      person,
      change
    }
  }
}
</script>

ref和reactive对比

从定义数据角度对比:
1. ref用来定义:基本数据类型
2. reactive用来定义:对象或数字类型数据
3. 备注:ref也可以用来定义对象或数组类型数据,它内部会自动通过reactive转为代理对象

从原理角度对比:
1. ref通过Object.defineProperty()的get和set来实现响应式(数据劫持)
2. reactive通过使用Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据

从使用角度对比:
ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value
reactive定义的数据:操作数据和读取数据:均不需要.value


setup两个注意点

setup的两个注意点:

1. setup执行的时机
在beforeCreate之前执行一次,this是undefined

2. setup的参数:即setup(props, context){}
props:值为对象,包含组件外部传递过来,且组件内部声明接收了的属性
context:上下文对象
    attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于this.$attrs
    slots: 收到的插槽内容,相当于this.$slots
    emit:分发自定义事件的函数,相当于this.$emit





具体案例:

1. App.vue:

<template>
  <DemoComponent @hello="sayHello" sex="男">
    <template v-slot:about>
      <div>关于</div>
    </template>
    <template v-slot:some>
      <div>一些</div>
    </template>
  </DemoComponent>
</template>

<script>
import DemoComponent from './components/DemoComponent'

export default {
  name: 'App',
  components: { DemoComponent },
  setup() {
    function sayHello() {
      console.log('我通过emit触发拉');
    }
    return {
      sayHello
    }
  }
}
</script>


2. DemoComponent.vue:

<template>
  <div>{{ person.name }}</div>
  <div>{{ person.age }}</div>
  <div>{{ sex }}</div>
  <button @click="handleClick">按钮</button>

  <slot name="about" />
  <slot name="some" />
</template>

<script>
import { reactive } from 'vue'

export default {
  name: 'DemoComponent',
  props: ['sex'],
  emits: ['hello'],
  setup(props, context) {
    console.log(props, 'props', context.slots);
    
    const person = reactive({
      name: '张三',
      age: 19,
    })

    function handleClick() {
      context.emit('hello', 1, 2, 3)
    }
    return {
      person,
      handleClick
    }
  }
}
</script>



文章来源:https://blog.csdn.net/weixin_50236973/article/details/134948024
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。