Vue——ref/reactive、toRefs、计算属性、监视、Vue3响应式原理、Vue3生命周期

ref/reactive

ref函数创建单个数据的响应式对象

 ref函数可以把数据创建成为ref对象，只要是ref对象，那么就一定是响应式

 ref创建单个值的响应式对象

 ref对象，在模板用的时候会自动拿value，不需要你去.value

 ref对象，在js当中修改的时候，需要.value

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
script>
<script lang="ts" setup>
import { ref } from "vue";
let msg = ref('我是哈哈哈');
function update() {
  msg.value = '我成为了嘿嘿嘿';
}
script>

ref传递对象

如果使用ref传递一个对象，本质内部也是在使用reactive

ref传递对象，那么返回的仍然是ref对象，它的value是代理对象

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
script>
<script lang="ts" setup>
import { ref } from "vue";
const state = ref({
  name: '啊哈',
  hobby: '诶嘿'
})
function update(){
  state.value.name = '1111'
}
script>

reactive

reactive是用来对一个对象创建代理对象，代理对象也是响应式的

reactive创建的代理对象，直接通过.语法去操作，不需要.value

不能传递非对象数据

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
script>
<script lang="ts" setup>
import { reactive } from "vue";
let msg = reactive({
  name: '我是哈哈哈'
});
function update() {
  msg.name = '我成为了嘿嘿嘿';
}
script>

toRefs

默认代理对象被解构，数据将失去响应能力

如果非要去解构，并且保证响应能力依然存在，需要使用toRefs方法

把state内部所有的属性全部转化为ref对象

解构出来不再是基本值，而是ref对象，就有响应式能力

<script lang="ts">
import { defineComponent, reactive } from "vue";
export default defineComponent({
  name: "About",
});
script>
<script lang="ts" setup>
import { ref, toRefs } from "vue";
 
const state = reactive({
  name: '啊哈',
  hobby: '诶嘿'
})
 
let result = toRefs(state)
console.log(result);
 
let {name, hobby} = result
console.log(name, hobby);
 
function update(){
  state.name = '1111',
  state.hobby = '2222'
}
console.log(state);
script>

计算属性