Vue3.x入门

最新推荐文章于 2023-07-28 17:54:19 发布
VIP文章 最新推荐文章于 2023-07-28 17:54:19 发布
阅读量1k 收藏 2
点赞数 1
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52283244/article/details/119040242
版权

目录

简介

优化:

破坏性语法更新

组合式API

setup入口函数

响应式API - reactive

*响应式API - ref

响应式API - computed (计算属性)

响应式API - watch

生命周期函数

Vue3.x中的生命周期钩子函数

拓展

父子通信

provide 和 inject

1. 基础使用

2. 传递响应式数据

TemplateRef

简介

        1. vue3.0 社区生态已经逐步完善
        2. 相较于vue2.x版本有了较大的整体优化
        3. 部分技术选型激进的公司已经在生产环境使用了vue3

优化:

 整体优化

  1. 性能提升

    • 首次渲染更快

    • diff算法更快

    • 内存占用更少

    • 打包体积更小

  2. 更好的Typescript支持

     3. Composition API （重点）     

相关文档   

Vue3 中文文档 https://vue3js.cn/docs/zh/

Vue3 设计理念 https://vue3js.cn/vue-composition/

破坏性语法更新

vue3.0对于2.0版本的大部分语法都是可以兼容的，但是也有一些破坏性的语法更新，这个大家要格外注意

  1. 实例方法$on移除 （eventBus现有实现模式不再支持 可以使用三方插件替代）

  2. 过滤器filter移除 （插值表达式里不能再使用过滤器 可以使用methods替代）

     3. .sync语法移除 （和v-model语法合并)

阅读：https://v3.cn.vuejs.org/guide/migration/introduction.html

组合式API

组合式API（Composition API）算是vue3对我们开发者来说非常有价值的一个API更新，我们先不关注具体语法，先对它有一个大的感知

对比选项式(options )api和组合式(composition )api

选项式api

  1. 使用简单 每个选项都有特定的位置
  2. 在项目组件变得比较庞大的是
最低0.47元/天 解锁文章
尤雨溪不会vue
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
首个 Vue3.x教程_Vue3.x+Ts+Vuex+Antd Ui框架入门进阶视频教程(34讲)-大地老师
01-30
此教程包括：Vue3.x环境搭建、Vue/cli脚手架使用、Vite脚手架使用、Vue目录结构 核心文件分析、Vue模板语法、Vue事件、Vue表单、Vue双休数据绑定、Vue Dom操作以、JavaScript表达式 、条件判断、 计算属性、watch...
Vue3.x基础
DuCheng_的博客
08-03 479
Vue是一种**MVVM模式**（Model-View-ViewModel）的前端框架，**Model（模型）**可以理解为数据，**View（视图）**可以理解为HTML页面，**ViewModel（视图模型）**即业务逻辑（或类似于方法），Vue就是用MVVM实现的数据双向绑定，即Model层与View层均与ViewModel层互相关联，而Model层与View层没有直接联系，是一种**低耦合、可重用、易测试**的模式。...
Vue3.x新特性总结及与vue2.x的对比
R的博客
04-12 1748
Vue3.0 特性总结1.OptionsApi 和 CompositionApi的区别2.template模板支持多个根标签3.获取页面实例与路由信息4.Vuex状态管理5.响应式对象函数 ref和reactive 1.OptionsApi 和 CompositionApi的区别 OptionsApi - Vue2.x 1.限制了自由度,必须按照规定来书写代码,如props,methods,data,computed,watch,各司其职,禁止越界 2.上下文必须使用this 3.生命周期包含beforeC
Vue3.x
m0_64599482的博客
06-30 204
什么是hook？本质是一个函数，把setup函数中使用的CompositionAPI进行了封装类似于vue2中的mixin自定义hook的优势：复用代码，让setup中的逻辑更清除易懂。
vue3的新特性
webtext的博客
02-28 1万+
vue3的新特性一、setup二、ref三、reactive三、计算属性computed三、计算属性watch四、watchEffect函数 一、setup 1、是vue3.0的中的一个新增配置项,值为一个函数。 2、setup是所有composition API(组合式api)展示的舞台。 3、setup函数的两种返回值： 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！） 若返回一个渲染函数：则可以自定义渲染内容。（了解） (不常用) 注意点: 1、尽量不要和vue2.x版本
vue3.x全套教程(实操)
热门推荐
贝西奇谈
03-15 6万+
一、MVVM模式和第一个Vue程序 1.什么是 MVVM 该层向上与视图层进行双向数据绑定 向下与 Model 层通过接口请求进行数据交互 2.第一个Vue程序  1、创建一个 HTML 文件  2、引入 Vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>...
vue-elem-app:基于vue2.3.x构建的elements外卖APP
05-28
使用vue2.3.x构建的elements外卖APP，基于: 在原基础上做出的改变： 运用了vue 2.3.x版本后添加的.sync语法糖 为商品选项卡中的滚动区添加了顶部固定效果,左侧菜单区也能根据用户在内容区的选择滚动相应位置 添加了...
vue2.x 轻松入门到实战
06-19
基于新的vue2.6，我们将通过简单的例子给大家讲解Vue的基础语法及编程思路，带大家的上手Vue的基础开发。最后通过一个案例将我们学习的知识灵活运用。
Vue.js前端开发 PDF
05-30
前端三大框架之一：Vue.js前端开发 PDF格式，有需要的朋友可以自行下载
vue-tailwindcss-cdn:Vue 3.x + Tailwind 2.x (cdn) :high_voltage:
05-29
Vue 3.x + Tailwind CSS 2.x （来自 CDN） :high_voltage: 这是一个用于快速原型制作HTML文件，其中...clamp 间变字体不错的按钮:)奖金生产环境的入门模板具有类似堆栈的（Vue 3.x + Tailwind 2.x + Inter var 字体）
关于VUE3.X的一点个人使用总结
weixin_46482956的博客
11-13 1093
1、 子传父 setup (props, ctx) { // 这里的ctx可以随便命名，它暴露了组件的三个property // Attribute (非响应式对象) console.log(ctx.attrs) // 插槽 (非响应式对象) console.log(ctx.slots) // 触发事件 (方法) console.log(ctx.emit) const changeParentNum = data => { // 通过ctx调用emit事件 需要注意的是Vue2.x中使用 $emit切
VUE 3.x 实战项目从0到1搭建
不怕麻烦的鹿丸的博客
04-01 2982
一、开发环境配置 1、安装node.js 通过官网下载安装node.js http://nodejs.cn/ 在用 Vue 构建大型应用时需要使用到node里面的 npm 来安装各种插件 Node 版本要求 Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推荐 v10 以上)。你可以使用n，nvm或nvm-windows在同一台电脑中管理多个 Node 版本。 2、npm配置淘宝镜像 如果在本地一直装不上npm的包，可以考虑用国内的淘宝镜像，使用淘宝定制的 ...
【VUE】Vue3.x学习汇总分享
weixin_45536132的博客
07-28 176
setup 有两种表现方式起初 Vue3.0 暴露变量必须 return 出来，vue3.2只需在script标签中添加setup语法糖直接在script标签中使用setup函数,需要returninfo . value = 'datas' } // 需要return return {} , };直接使用setup语法糖（主要介绍语法糖）Vue2的响应式是基于Object.defineProperty实现的Vue3的响应式是基于ES6的Proxy+Reflect来实现的。
三个小时vue3.x从零到实战（前）（vue3.x基础）
数据知道的博客
07-13 4万+
一. 学前了解 1.1 前置知识 HTML: 超文本传输语言，主要用来编写网页的结构。 CSS: 层叠样式表，包括颜色，大小，字体等，实现漂亮，布局合理的效果。 JavaScript: 前端样式语言，实现页面逻辑，行为，动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。 node, npm, webpack等 1.2 学习vue3.x的相关网站 官网：https://vuejs.org/ 中文官网：https://cn.vuejs.org/ 中文官网vue3：https:/
Vue3.x笔记
ડUN的博客
12-03 483
初认识Vue3.x 官网：https://cn.vuejs.org/index.html Vue是一套基于MVVM模式的用于构建用户界面的Javascript框架。它是以数据驱动和组件化的思想构建的。Vuej是由一个名叫尤雨溪的作者开发的，他于 2013 年12月7 日发布了 Vuejs 的 0.6.0版本（之前的版本不叫 Vue.js），2015年10月26 日发布了 1.0.0 版本，2016 年 10 月1日发布了 2.0.0 版本，2020年 9 月 18日发布了3.0版本代号为 One Pieee
vue习题
qq_45179355的博客
06-03 1万+
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。A new Vuex.Store({})B new Vue({})C new Vuex({})D new Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({ state:{name:'store'}})var vm = new Vue({...
【vue3.x】vue3.x基础知识学习
代码随想录
02-27 1112
1.vue2.x和vue3.x项目的区别 1.1.创建应用实例的方式 vue2.x： 通过new Vue()创建vue根实例，从同一个vue构造函数创建的每一个根实例共享相同的全局配置 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ ro.
（Vue）Vue课后题
m0_67390773的博客
03-10 1万+
Vue课后题 文章目录 Vue课后题 第1章 Vue.js 基础入门 一、填空题 二、判断题 三、选择题 四、简答题 五、编程题 第2章 Vue 开发基础（上） 一、填空题 二、判断题 三、选择题 四、简答题 五、编程题 第3章 Vue 开发基础（下） 一、填空题 二、判断题 三、选择题 四、简答题 五、编程题 第4章 过渡和动画 一、填空题 二、判断题 三、选择题 四、简答题 五、编程题 第5章 Vue 路由 一、填空题 二、判断题 三、选择题 四、简答题 五、编
hbuilderx开发app vue3
最新发布
09-05
HBuilderX 是一款由DCloud开发的跨平台开发工具，支持使用 Vue3 开发移动应用。你可以在 HBuilderX 中创建一个 Vue 项目，并使用 Vue3 的语法进行开发。 下面是一些简单的步骤： 1. 首先，确保你已经安装了 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值