setup

setup
setup总结
ref()函数 -- 实现响应式
- ref()小结
reactive函数处理对象(包括数组)
- reactive小结
vue2/3响应式原理
- vue2存在问题, 提供的修改方式
vue3解决了以上问题
- window.proxy 浏览器内置构造函数
- vue3响应原理
vue3响应原理总结
reactive与ref区别/使用
setup的两个注意点 -- 参数
setup只有两个参数
- 第一个props,
- 第二个context
- （用props同级对象）emits接收父组件传递的事件
- emit触发事件
$attrs
$slots

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解决了以上问题

添加对象属性: 对象.新属性
删除对象属性: delete 对象.新属性

原因: 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,

1.用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属性内

前端之vue3的setup和setup的2个的形参、响应式页面相关推荐

显示外部页面_前端设计-响应式页面开发基础
随着终端设备类型的丰富,设备尺寸的型号也越来越多,如果实现前端页面在不同终端设备中,按照设备的尺寸型号进行自动布局,保证良好的人际交互体验效果,已经成为网页前端设计所需要考虑的问题,当前支持响应式开发 ...
bootstrap设计登录页面_前端小白如何在10分钟内打造一个爆款Web响应式登录界面？...
对于前端小白(例如:专注后端代码N年的攻城狮),自己编写一个漂亮的Web登录页面似乎在设计上有些捉襟见肘,不懂UI设计,颜色搭配极度的混乱(主色,辅助色,配色,色彩渐变,动画效果等等,看起来一堆乱七八 ...
【前端实例代码】如何使用 HTML 和 CSS 快速创建一个响应式导航栏
效果图: 大屏: 小屏: bilibili在线视频演示地址: [前端实例代码]如何使用 HTML 和 CSS 快速创建一个响应式导航栏nav_哔哩哔哩_bilibili完整代码在这里:https:// ...
vue3中对对象增添属性也会加入到响应式
我们先来看看看vue2版本: vue2版本中对一个对象增添属性不会有响应式,需要通过set方法来进行控制,比如一下点击点击岁数按钮时,岁数不会显示到页面中去. 再来看看vue3版本: 这时点击 ...
web前端开发技术作期末大作业成品：健身网站 bootstarp 响应式 4页带汉堡菜单
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园篮球网页设计 | 足球体育运动 | 体育游泳运动 | 兵乓 ...
前端开发工程师 - 04.页面架构 - CSS Reset 布局解决方案响应式页面优化规范与模块化...
04.页面架构第1章--CSS Reset 第2章--布局解决方案居中布局课堂交流区水平列表的底部对齐如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
在 react 里写 vue3 ? 还写了自定义 hooks和 Hoc 构建了响应式！
作者 |
前端基础7：a标签常用方法和元素居中方式，响应式@media
a标签 a标签作用锚点语法:href="#+指定位置" a标签href属性的属性值为相应要跳转到的元素id属性名前加# <a href="#top"& ...
web前端期末大作业：基于HTML+CSS+JavaScript奥迪企业bootstrap响应式网站

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

setup

setup

setup总结

ref()函数 – 实现响应式

ref()小结

reactive函数处理对象(包括数组)

reactive小结

vue2/3响应式原理

vue2存在问题, 提供的修改方式

vue3解决了以上问题

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

vue3响应原理

vue3响应原理总结

reactive与ref区别/使用

setup的两个注意点 – 参数

setup只有两个参数

第一个props,

第二个context

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

emit触发事件

$attrs

$slots

前端之vue3的setup和setup的2个的形参、响应式页面相关推荐

最新文章

热门文章