乐趣区

关于前端:前端之vue3的setup和setup的2个的形参响应式页面

jiezi

setup

setup 是个函数, 蕴含数据、办法等，是组合 api 的“舞台”。
setup 返回值：
1. 对象，其中的属性、办法都能够在模板中间接应用
2. 渲染含数（理解就好）

export default {
  name: "App",
  components: {},
  setup() {
  // 非响应式变量
    let name = "欧西里斯";
    let age = 18;
    function sayHello() {alert(`Hello,I'm ${name}`);
    }

    return {
      name,
      age,
      sayHello,
    };
  },
};

setup 和 data(), methods，vue3 兼容 vue2.

setup 总结

async 润饰的函数返回值被 Promise 包裹住
async 与 await 配合

ref()函数 – 实现响应式

返回援用对象(ref 对象), 能够动静渲染页面

let age = ref(18);
let obj = ref({
  type: "前端工程师",
  salary: "10k",
});

应用:
1.js 中应用时用 对象.value 读取或批改数据

age.value = 14;
obj.value.type = "后端工程师", obj.value.salary = "10000k";

2. 在模板中, 用插值语法, RefImpl 对象能够主动读取 value 属性的值

// ref 的参数是对象,type 是参数对象的属性
  <h2> 职业:{{obj.type}}</h2>

// ref 的参数不是对象
  <h2> 年龄:{{age}}</h2>

ref 仍旧能够作为惟一标识获取元素对象
返回值是一个对象

RefImpl
ref: reference
impl: implement

ref()小结

reactive 函数解决对象(包含数组)

深层次响应, 也就是说屡次对象嵌套属性也会满足响应式
数组能够用索引改(响应式)

<template>
<!-- 4. 渲染 -->
  <h1> 个人信息 </h1>
  <h2> 姓名:{{person.name}}</h2>
  <h2> 年龄:{{person.age}}</h2>
  <h2> 职业:{{person.obj.type}}</h2>
  <h2> 工资:{{person.obj.salary}}</h2>
  <h2> 喜好:{{person.hobby}}</h2>
  <button @click="sayHello"> 问好 </button>
  <button @click="changeInfo"> 批改信息 </button>
</template>

<script>
// 1. 引入
import {reactive} from "vue";
export default {
  name: "App",
  components: {},
  setup() {
    // 数据
    // 2. 应用
    let person = reactive({
      name: "欧西里斯",
      age: 18,
      obj: {
        type: "前端工程师",
        salary: "10k",
      },
      hobby: ["抽烟", "喝酒", "烫头"],
    });
    // 办法
    // 3. 批改
    function sayHello() {alert(`Hello,I'm ${person.name}`);
    }
    function changeInfo() {
      person.name = "李四";
      person.age = 14;
      // console.log(obj);
      (person.obj.type = "后端工程师"), (person.obj.salary = "10000k");
      // console.log(name, age);
      person.hobby[0] = "学习";
    }
    return {
      person,
      sayHello,
      changeInfo,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

reactive 小结

vue2/ 3 响应式原理

vue2 存在问题, 提供的批改形式

vue3 解决了以上问题

起因: reactive 解决对象, 变成响应式对象, 应用了 ES6 新属性 proxy

window.proxy 浏览器内置构造函数

window.proxy 批改源数据

vue3 响应原理

es6 新属性 Reflect 增 (defineProperty) 删(deleteProperty)改 (set) 查(get)
Reflect 返回值
胜利 true
失败 false

vue3 响应原理总结

reactive 与 ref 区别 / 应用

数据能够用 data 对象
data 对象内有 n 个对象

setup 的两个留神点 – 参数

setup 只有两个参数

第一个 props

用 props 接管, 以参数模式放入 setup 内
setup 内的 props 是 Proxy 代理对象模式

import {reactive} from "vue";
export default {
  name: "HelloWorld",
  // 1. 接管
  props: ["msg"],
  // 2. 参数 1(Proxy 对象模式)
  setup(props) {
  // 3. 应用
    console.log("props:", props.msg);
    let person = reactive({
      name: "欧西里斯",
      hobby: ["抽烟", "喝酒", "烫头"],
    });

    return {person,};
  },
};

第二个 context

（用 props 同级对象）emits 接管父组件传递的事件

和 props 一样的用法, 然而不写也能够用
用 emits 接管父组件传递过去的自定义事件

emit 触发事件

context.emit(‘事件’, 参数)

$attrs

父组件传参, 子组件没接管, 数据存在子组件的 $attrs 属性内

$slots

父组件将 html 内容传递给子组件, 子组件没用 slot(插槽)接管, 数据存在子组件的 $slots 属性内

退出移动版