vue3基础小结

已于 2023-10-31 15:56:24 修改
阅读量40 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-05-11 13:56:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61123851/article/details/130614261
版权

vue3响应式原理

vue3响应式原理是借助es6的proxy代理和reflect反射结合使用

proxy可以检测到各种操作变化，使用reflect操作代理对象。相比于vue2的object.defineproperty检测的范围更广。

至于为什么要用reflect来操作对象。一是官方有意将object的一些方法移植到reflect上。二是用reflect写底层原理的框架会更加健壮，用原生的object方法如果出现报错会终止js线程运行，但是reflect不会。

vue3常用组合式api

  • reactive和ref

两者都是把数据变成响应式，但是一般ref用于基本数据类型，reactive用于对象数据类型

ref也可以用于对象数据类型，但是ref实现响应式原理同vue2一样，都是用object.defineproperty实现的。如果传入对象数据类型，ref底层也会借助reactive。

ref操作数据需要.value，模板读取不需要.value。reactive都不需要reactive

  • toRef和toRefs

用于取值，把响应式数据暴露给模板使用

Stewie Griffin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite开发vue3小结
木玄客的博客
11-01 369
vite+vue3+vuex+vue-router基础项目搭建-自用
vue基础小结
Weiyl的博客
06-27 177
vue小结 网速导致闪烁问题 [v-cloak] { /* 闪烁问题 */ display: none; } 页面数据渲染 插值{{…}} ​ 保留原有数据 v-text v-html ​ 解析html 属性绑定（v-bind----:） 触发事件（v-on—@） .stop 阻止事件冒泡机制（阻止自身之后的事件发生） .self 阻止事件冒泡机制（只会阻止自身事件的发生） .prevent 阻止超链接的默认行为（href属性） .once 需要和.
vue3使用小结
baidu_41601048的博客
01-31 1004
1 watch 用法 ：1 可以监听某个ref对象。此时watch的第一个参数可以直接是ref 如下 <input type="text" v-model="message" /> import {ref} from "vue" setup(props,ctx){ const message =ref("") watch(message,(newVal,oldVal)=>{ console.log("newVal:",newVal) console.lo......
Vue3 数据基础操作
xiamoziqian的博客
12-14 2512
一、知识点 defineComponent 构建应用及绑定事件 使用 reactive 绑定数据 使用 ref ( torefs ) 绑定数据 使用 getCurrentInstance 获取当前实例化对象上下文信息 watch、watchEffect 数据监听 简单的 TodoList 点餐功能 实例一：使用 reactive 绑定数据 <template> <div> <h1>使用 reactive 绑定数据</h1> <p&
vue小结
m0_64505886的博客
07-15 882
​。
Vue基础小结
qq_48336929的博客
03-30 69
前端-vue的小结
links_577073699的博客
04-26 554
总结vue的知识点
Vue学习开发小结
前端公虾米
03-07 163
1、修饰符input输入值转成数值类型：    给v-model添加number修饰符     &lt;input v-model.number='number' type='number'&gt;    在input添加type=‘number’返回的依然是字符串input过滤输入值的首尾空白字符：    给v-model添加trim修饰符    &lt;input v-model.trim='...
Vue 3 介绍
热门推荐
csdn727232616的博客
06-21 7万+
vue3基础
Vue.js基础知识小结
12-29
数据绑定 1.单向绑定 {{massage}} var app = new Vue({ el:#app, data:{ message:Hello,vue.js! } 2.双向绑定 <p>{{message}} ...var app = new Vue({ ...message:Hello,vue.js!...3.v-for列表渲染 <ul>
Vue单文件组件基础模板小结
12-12
相信大家在使用Vue开发项目时，基本都是以单文件组件的形式开发组件的，这种方式好处多多： 1.代码集中，便于开发、管理和维护 2.可复用性高，直接将vue文件拷贝到新项目中 我暂时就想到这两点，童鞋们可以在评论里...
vue.js入门教程之基础语法小结
10-21
在这个“vue.js入门教程之基础语法小结”中，我们将深入探讨Vue.js的基本语法，帮助初学者快速掌握其核心概念。 1. 插入文本 在Vue中，我们可以使用双大括号`{{ }}`来插入文本。例如，`<span>Message: {{ text }}...
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 471
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
Vue.js中自定义Markdown插件实现References解析
最新发布
浮游的博客
07-25 312
是一个快速、灵活的Markdown解析器，它支持CommonMark标准，并且可以通过插件来扩展其功能。在Vue.js项目中，我们可以使用来将Markdown文本转换为HTML。在某些情况下，我们可能需要在Markdown文本中包含自定义的HTML标签，例如标签，用于显示参考文献或其他额外信息。为了能够在中解析这些自定义标签，我们需要编写一个自定义插件。首先，我们需要定义插件应该执行的功能。在我们的例子中，插件需要识别标签，并将其转换为相应的HTML结构。我们使用正则表达式来匹配Markdown文本中的。
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 376
Python Formulas库，JSON格式导出导入。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 330
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
【vueUse库Time模块各函数简介及使用方法--全篇】
xiejunlan的博客
07-23 763
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 327
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
vue3基础语法小案例
04-03
以下是一个简单的Vue3基础语法小案例： HTML代码： ``` <h1>{{ message }} <button v-on:click="changeMessage">Change Message ``` Vue实例代码： ``` const app = Vue.createApp({ data() { return { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值