vue3.0之加深印象

原因：对vue3.0不熟悉，因此需要加深印象

响应式基础

声明响应式状态 reactive

要为 JavaScript 数组或对象 创建响应式状态，可以使用 reactive 方法：

<template>
  <div class="todo-list">
    <p>当前count值:{{ count }}</p> 
  </div>
</template>
<script lang="ts">
// 在vue2中 data 在vue3中使用 reactive代替
import { reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";
export default {
  // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成
  setup(props, context) {
       const state = reactive({
        count: 0,
      });
      console.log(state.count);
      return {
        state,
      };
  },
};
</script>
<style scoped></style>
复制代码

reactive 相当于 Vue 2.x 中的 Vue.observable() API，该响应式转换是“深度转换”——它会影响嵌套对象传递的所有 property。

• 参数只能传入数组或对象
• 值直接获取，不需要加.value

个人理解：相当于将某个原始值转化为响应式的，针对对象的、多个的

独立的响应式 refs

我们有一个独立的原始值 (例如，一个字符串)，我们想让它变成响应式的。当然，我们可以创建一个拥有相同字符串 property 的对象，并将其传递给 reactive。Vue 为我们提供了一个可以做相同事情的方法 ——ref：

ref 会返回一个可变的响应式对象，该对象作为它的内部值——一个响应式的引用，这就是名称的来源。此对象只包含一个名为 value 的 property ：

<template>
  <div class="todo-list">
    <p>当前count值:{{ count }}</p> 
  </div>
</template>
<script lang="ts">
// 在vue2中 data 在vue3中使用 reactive代替
import { reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";
export default {
  // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成
  setup(props, context) {
    const count = ref(1);
    const person = ref({
      name: "wht",
    });
    console.log(person.value.name);
    console.log(count.value);
    return {
      count,
      person,
    };
  },
};
</script>
<style scoped></style>
复制代码

• 建议优先使用ref
• 参数可以传递任意类型，适用性广
• 获取值时候需要加.value，

个人理解：将数据变成响应式，针对单个的

响应式状态解构

将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联

import { reactive, toRefs } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: 'You are reading this book right now ;)',
  price: 'free'
})
//需要将响应式对象转化为ref
let { author, title } = toRefs(book)

title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题，现在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide'
复制代码

computed

<template>
  <div class="todo-list">
    <p>当前count值:{{ count }}</p> 
  </div>
</template>
<script lang="ts">
// 在vue2中 data 在vue3中使用 reactive代替
import { reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";
export default {
  // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成
  setup(props, context) {
    const count = ref(1);
    const plusOne = computed({
      get: () => {
        count.value++;
      },
      set: (val) => {
        count.value = val - 1;
      },
    });
    plusOne.value = 1;
    console.log(count.value); // 0
    return {
      count,
    };
  },
};
</script>
<style scoped></style>
复制代码

watch

参数：

• 一个响应式引用或我们想要侦听的 getter 函数
• 一个回调
• 可选的配置选项，例如deep:true，深度监听、 immediate: true，立即执行

<template>
  <div class="todo-list">
    <p>当前count值:{{ count }}</p> 
  </div>
</template>
<script lang="ts">
// 在vue2中 data 在vue3中使用 reactive代替
import { reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";
export default {
  // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成
  setup(props, context) {
    const count = ref(1);
    const add = () => {
      count.value++;
    };
    watch(
      count,
      (newVal, oldval) => {
        console.log("当前的oldval值：" + oldval);
        console.log("当前的newval值：" + newVal);
      },
      {
        deep: true,
        immediate: true,
      }
    );
    return {
      count,
      add
    };
  },
};
</script>
<style scoped></style>
复制代码

生命周期

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}
复制代码

Vue3.0中文官网教程：vue3js.cn/docs/zh/gui…