setup中ref与reactive

setup函数：

1. 新的option，所有的组合api函数都在此使用，只有在初始化时执行一次

<template>
     <div>
       哈哈，我有变帅了
     </div>
   </template>
   
   
   <script>
   import { defineComponent } from 'vue'
   
   export default defineComponent({
     setup() {
       console.log('woshinidie')
     },
   })
   </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

后台输出：

使用到这，这个函数有点vue2.0中生命周期函数created的味道了

2. 函数如果返回对象，对象中的属性或方法，模板中可以直接使用

ref实现响应式：
ref是一个函数，作用：定义一个响应式的数据，返回的是一个ref对象，对象中有一个value属性，用来处理基本数据类型，如果用ref对象/数组，内部自动会将对象/数组转换为reactive的代理对象

如果需要对数据进行操作，需要使用该ref对象调用value属性的方式进行操作

<script>
import { defineComponent,ref } from 'vue'

export default defineComponent({
  // 需求：页面打开后可以直接看到一个数据，点击按钮后，该数据可以发生变化
  setup() {
    let number = ref(0)
    function updateNumber() {
      number.value ++
    }
    return {
      number,
      updateNumber
    }
  },
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

html模板中是不需要使用.value属性的写法

<template>
  <div>
    哈哈，我有变帅了
    <h2>{{number}}</h2>
    <button @click="updateNumber">点击加1</button>
  </div>
</template>
1
2
3
4
5
6
7

reactive作用：定义多个数据的响应式
const proxy = reactive(obj)；接收一个普通对象然后返回该普通对象的响应式代理器对象

<template>
  <div>
    <h2>姓名：{{user.name}}</h2>
    <h2>年龄：{{user.age}}</h2>
    <h2>媳妇：{{user.wife}}</h2>
    <button @click="updateUser">更新用户信息</button>
  </div>
</template>


<script>
import { defineComponent,reactive,ref } from 'vue'

export default defineComponent({
  // 需求：显示用户的相关信息，点击按钮，可以更新用户的相关信息数据
  setup() {
    const user = reactive({
      name:'小明',
      age:16,
      wife:{
        name:'小花',
        age:16,
        cars:['奔驰','宝马']
      }
    })
    const updateUser = () => {
      user.name = '笑红尘',
      user.age ++
    }
    console.log(user)
    return {
      user,
      updateUser
    }
  }
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

效果：

const user = reactive（obj）
（1）uesr对象或者obj对象添加一个新的属性，哪一种方式会影响界面的更新
（2）user对象或者obj对象中移除一个已经存在的属性，哪一种方式会影响界面的更新