vue3.0 setup ref函数 reactive函数 conputed计算属性 teleport 移动html位置

目录

setup

ref函数（最好用来定义基本数据类型，数字、字符串等）

reactive函数（只能用来定义对象和数组的响应式数据且定义的响应式数据是深层次的）

conputed计算属性

 teleport 将html结构移动到指定位置 (to指定元素, 被 teleport 包围的html就移动到该元素下)

---

 

setup

• vue3.0中一个新的配置项，值为一个函数
• setup相当于Composition API（组合式API）的容器，组件中用到的数据，方法等均配置在setup中
• setup执行在beforeCreate钩子函数之前
• setup接受的两个参数

1. props：值为对象，包含组件外部传递且组件内部声明接收了的属性
2. context：上下文对象

• attrs：值为对象，包含组件外部传递且组件内部没有声明接收的属性
• slots：收到的插槽内容
• emit：分发自定义事件的函数（使用时需要在emits中定义要使用的自定义函数）

• setup两种返回值

1. 回一个对象，对象中的属性，方法在模板中可以直接使用
2. 返回一个渲染函数，可以自定义渲染内容

•  尽量不要与vue2.x混用

1. vue2.x可以使用this.xxx访问到setup中属性和方法，但是setup中不能访问到vue2.x中配置；如果有重名，setup优先

---

ref函数（最好用来定义基本数据类型，数字、字符串等）

let str = "字符串";

直接定义变量不是响应式，响应式需要使用vue3.0 ref函数

let str = ref("字符串");

修改引用对象（ref）的数据时，需要使用.value进行修改，否则不生效

let str = ref("字符串");
str.value = "不是字符串";

---

reactive函数（只能用来定义对象和数组的响应式数据且定义的响应式数据是深层次的）

let obj = rective({
    name: "韩梅梅",
    sex: "女",
});

rective函数定义的响应式对象在修改里边的数据时候不需要.value

let obj = rective({
    name: "韩梅梅",
    sex: "女",
});

obj.sex = "不是男";

---

conputed计算属性

简写（只能读取，不能修改）

let info = reactive({
    name: "韩梅梅",
    age : 18,
});

info.nameAge = computed(() => {
    return `我叫${info.name}，今年${info.age}岁了。`;
});

完整写法（能读能写）

let info = reactive({
    name: "韩梅梅",
    age : 18,
});

info.nameAge = computed({
    get(){
        return `我叫${info.name}，今年${info.age}岁了。`;
    }
    set(val){
        // val是输入框传递过来的参数
        // 可以进行处理之后向info.name和info.age赋值
        // 响应式数据，赋值之后页面数据会更新
    }
});

 teleport 将html结构移动到指定位置 (to指定元素, 被 teleport 包围的html就移动到该元素下)

<teleport to="body">
    <div>
        <div>我去body了</div>
    </div>
</teleport>