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

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>
相关推荐
翻滚吧键盘7 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi2 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X2 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come112343 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
海天胜景5 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼5 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再5 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5555 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架