vue3.0学习笔记（reactive和shallowReative函数进行响应式）

1.运用reactive函数进行数据更改

<template>
 

<h2>职位:{{workList.work}}</h2>

<h2>工资:{{workList.wage}}</h2>

<button @click="changeClick">点击改变数据</button>

</template>

<script>

import {reactive} from 'vue'

export default {
  name: 'App',
 
 setup(){

  let workList=reactive({work:'前端工程师',wage:'30K'})

  function changeClick(){'
    workList.work='UI设计师'
    workList.wage='3K'
  }
 

  return {
    changeClick,
    workList
  }
 }
}
</script>

reactive函数大致跟ref函数用法相同.只不过reactive函数作用不到JS的基础类型(例:字符串,数组)

reactive函数相比ref函数,没有那些.value的语法.直接就可以找到他.跟vue2.0更改数据大致相同

2.reactive函数更改普通数据(灵活运用,把字符串 数值转换成对象)

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

<h2>名字:{{infoList.name}}</h2>

<h2>年龄:{{infoList.age}}</h2>

<button @click="changeClick">点击改变数据</button>

</template>

<script>

import {reactive} from 'vue'

export default {
  name: 'App',
 
 setup(){

  //灵活运用reactive   把原来的字符串,数值转换一下对象 
  let infoList=reactive({name:'小王',age:20})

  //通过点击事件    改变原来的值
  function changeClick(){
    infoList.name='小张'
    infoList.age='31'
  }
 
  //最后return出去
  return {
    changeClick,
    infoList,
  }
 }
}
</script>

3.shallowReative函数

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

<h2>名字:{{infoList.name}}</h2>

<h2>年龄:{{infoList.age}}</h2>

<button @click="changeClick">点击改变数据</button>

</template>

<script>

import {shallowReative} from 'vue'

export default {
  name: 'App',
 
 setup(){

  //灵活运用shallowReative 
  let infoList=shallowReative({name:'小王',age:20})

  //通过点击事件    改变原来的值
  function changeClick(){
    infoList.name='小张'
    infoList.age='31'
  }
 
  //最后return出去
  return {
    changeClick,
    infoList,
  }
 }
}
</script>

shallowReative只处理对象最外层数据的响应式

使用场景：如果有一个对象数据，结构比较深，但变化的只是最外层数据时使用