Vue 源码中 Vue 为什么不用class来构造, 而使用了函数呢 ?

最新推荐文章于 2023-11-24 14:13:41 发布
最新推荐文章于 2023-11-24 14:13:41 发布
阅读量736 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kilograms/article/details/126490222
版权

在这里插入图片描述
在这里插入图片描述

Vue之所以没有选择用es6的 Class 是因为 Class 本身扩展性不强. Vue将所有的功能都分布到多个模块中, 函数才具有这样的扩展性并且 Vue 源码中某些地方改过 this 指向, class 也是不具备的.

62 kilograms
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3 函数式组件的开发方式
郊眠寺
01-17 2268
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
vue2升级vue3：class component的遗憾
周陆军的博客，分享it技术。
06-21 1091
the Class API proposal is being dropped。之前class components组件升级vue3，还是用composite api重头再来^
为什么vue创建不用es6中class而是用函数
jijunqing321的博客
06-14 810
看vue源码的时候，发现在创建vue时用的是function而不是class。由于对class用的较少，真心不知道二者的区别在哪里，所以百度一下，发现网上的答案真心不清不楚： function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called wit
vue2中的Vue为何使用构造函数来实现而不是使用es6的Class?
小何程序员的博客
02-10 749
首先我们先来看看vue2源码 function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { // 判断如果不是通过 new 的方式调用，则抛出警告 warn('Vue is a constructor and should be called with the `new` keyword') } this._init(op
Vue 或者 React 中，什么情况下会用 Es6 的 Class 类
最新发布
云散的博客
11-24 1754
class类
ES6 Class
weixin_34080903的博客
12-14 70
ES6 引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 class Point { constructor(x, y) { this.x = x; this.y...
深入理解vue-class-component源码阅读
01-19
vue-class-component是vue作者尤大推出的一个支持使用class方式来开发vue单文件组件的库。但是，在使用过程中我却发现了几个奇怪的地方。 首先，我们看一个简单的使用例子： // App.vue [removed] import Vue ...
在vue项目中使用codemirror插件实现代码编辑器功能
10-16
当用户在编辑器中活动时，`cursorActivity`事件会触发`showHint`函数，为用户提供实时的代码提示。 总结一下，利用`codemirror`插件在Vue项目中创建代码编辑器的关键步骤包括： 1. 安装`codemirror`依赖。 2. 引入...
Vue3 源码导读(推荐)
10-16
值得注意的是，Vue3源码并未大量使用`class`关键字，这使得代码更接近函数式编程风格。 Vue3当前处于Pre-Alpha阶段，后续将经历Alpha和Beta等阶段，预计2020年第一季度以后才会发布正式版。对于开发者来说，现在是...
vue入门级demo包含源码.rar
08-15
- **生命周期钩子**：Vue实例从创建到销毁的过程中，有一系列生命周期阶段，每个阶段都有对应的钩子函数，如`beforeCreate`、`created`、`mounted`、`updated`等，可以在此处添加相应的逻辑。 6. **状态管理** - ...
“别滥用Class”——HTML语义化、前端三层分离理解
weixin_34233618的博客
12-21 277
为什么80%的码农都做不了架构师？>>> ...
应该在JavaScript中使用Class吗？
热门推荐
前端开发博客
06-29 1万+
点击上方“前端开发博客”，选择“设为星标”回复“2”加入前端群来源：FreewheelLeehttps://zhuanlan.zhihu.com/p/158956514看似无处不在的OOP...
vue源码解读-构造函数
weixin_33939843的博客
11-20 144
src/core/instance/index.js此文件主要实现了Vue初始化 // 引入模块 import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from './render' import { e...
Vue 3.x 废弃和修改的用法
weixin_41489378的博客
03-16 803
filters Vue3.0 将不再支持filters语法。 <!-- before --> {{ msg | format }} <!-- after --> {{ format(msg) }} 原因 Filters的功能可以通过方法调用或计算属性轻松复制，因此它主要提供的是语法价值，而不是实际价值。 Filters需要一个自定义的小语法，然而这打破表达式只是JavaScript的假设——这增加了学习和实现的成本。事实上，它与JavaScript自己的位或运算符(|)相冲突，
Vue中使用 class 类样式的方式
最爱喝怡宝的博客
11-20 6892
在vue中为我们提供了 几种方式来使用class类的样式
一、【Vue3】——工程结构分析&初识setup
yifei1234567的博客
03-28 861
Vue2与Vue3工程区别分析
vue3.0下如何挂载全局方法
weixin_44123053的博客
02-28 4029
vue3.0取消了Vue.prototype，官方文档推荐使用globalProperties 具体用例如下 static.js: import router from "@/router"; function getStatic(url) { return 'http://localhost:81/' + url } function linkTo (url, data) { router.push({path: url, query: data}) } export default {
vue项目，页面class不生效
paopaosama的博客
06-05 1万+
代码如下，vue项目中，页面有一个class为c-ul的div,但是浏览器中style里没有我的c-li样式。这是为什么呢。研究一番之后发现： 1.我的style是scoped，也就是css样式仅应用于我的这个名为component1的页面。因此，在挂载的时候，页面的所有元素都会被vue加上一个自定义属性名：类似于这样的<div data-v-5e57fb82="" class="wrap...
关于vue 里:class 的几种使用方式
datishi8133的博客
02-02 9752
最近一直在做vue项目 从网上搜索到的资料不太多。关于:class的使用 结合自己的实现 整理如下。接下来一篇写:style 。其实从:class 这里可以想到:style的使用 也是类似的 一 class 1 自定义class 通过vue computed 计算属性 实现 我的class 是名称+时间戳，是独一份的，可以作为id角色使用。 html: <div :cl...
vue3中使用typescript
07-27
在Vue3中使用TypeScript可以带来许多好处。首先，TypeScript是JavaScript的一个超集，它提供了类型系统和对ES6的支持，这可以增加代码的可读性和可维护性。在Vue3中，官方已经使用TypeScript编写了源码，这也是Vue3升级的一个亮点。\[1\] 在Vue3中，你可以直接使用TypeScript来定义组件。你可以使用`defineComponent`函数来定义组件，并使用`PropType`来定义组件的属性类型。例如，你可以这样写一个组件： ```typescript import { defineComponent, PropType } from 'vue'; interface Student { name: string; class: string; age: number; } const Component = defineComponent({ props: { success: { type: String }, callback: { type: Function as PropType<() => void> }, student: { type: Object as PropType<Student>, required: true } }, data() { return { message: 'Vue3 code style' }; }, computed: { reversedMessage(): string { return this.message.split('').reverse().join(''); } } }); ``` 这样，你就可以在Vue3中使用TypeScript来定义组件的属性类型，并且享受到类型检查的好处。\[2\] 当然，在初期使用TypeScript时，一些开发者可能会倾向于使用`any`类型，这样会失去TypeScript的类型检查的意义。但是，养成写类型的习惯是很重要的，可以逐渐提高代码的可靠性和可维护性。所以，在使用Vue3和TypeScript时，建议尽量避免使用`any`类型，而是养成写类型的好习惯。\[3\] #### 引用[.reference_title] - *1* *2* *3* [Vue3.0+TS 项目上手教程](https://blog.csdn.net/Ed7zgeE9X/article/details/109039793)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值