vue2与vue3知识点

果子切克now2024-10-08 3:02

1.vue2（optionsAPI）选项式API

2.vue3（composition API）响应式API

vue3 setup 中this是未定义（undefined）vue3中已经开始弱化this

vue2通过this可以拿到vue3setup定义得值和方法

setup语法糖

ref =========> 可以定义：基本类型、对象类型得响应式数据

reactive ======> 定义：对象响应式数据

toRef 的作用是将一个响应式对象中的属性转换成单独的响应式引用

toRefs 将一个对象的所有属性变成响应式引用，

javascript 复制代码

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    // 创建一个响应式对象
    const state = reactive({
      count: 0,
      name: 'Vue 3'
    });

    // 使用toRefs将响应式对象的属性转换为响应式引用
    const refs = toRefs(state);

    // 返回响应式引用，以便在模板中使用
    return {
      ...refs
    };
  },
};

javascript 复制代码

<template>
    <div>
        <!-- 使用ref -->
        <el-button type="warning">Warning</el-button>
        <el-button type="danger" @click="changeData">Danger</el-button>
        <div>姓名{{ name }}</div>
        <div>年龄{{ age }}</div>
        <div>电话{{ tel }}</div>
        <!-- 使用reactiv -->

    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
//数据
let name = ref('张三')
let age = ref(42)
let tel = ref(15231971993)
const changeData = () => {
    age.value = age.value + 10
}
// reactive
let car = reactive(
    {
        brand: '银行',
        price: 20,
        color: 'red'
    }
)
console.log(car,'car')
</script>