vuecli3+typescript 关于构造函数constructor, 生命周期 created 初始化变量的试探

最新推荐文章于 2025-05-25 23:35:46 发布
原创 最新推荐文章于 2025-05-25 23:35:46 发布 · 8.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在ts+vue项目中，组件类继承自vue类，变量初始化位置影响视图更新。若在created钩子中初始化，后续改变可能不触发视图更新。正确做法是在变量定义时或constructor构造函数中初始化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在ts+vue项目中，组件类继承自vue类，可以使用constructor构造函数，

变量的初始化可以在定义的时候实现，也可以在构造函数中实现，而我一开始选择了在created中实现，踩了个深坑。。。

我将变量的初始化放在了created里，发现之后的赋值不会触发视图更新！！

变量的值可以更改，但是就是不会触发视图更新，也没有任何报错，

尝试了一番后，在变量定义的时候赋初值就可以正常视图更新了

接下来又尝试了在constructor构造函数中初始化变量，同样没有问题，

在这里写下来，踩一坑长一智

9、React与TypeScript开发：核心概念与实践指南
work3的博客
07-08 8
本文深入介绍了React与TypeScript开发的核心概念与实践技巧。内容涵盖React中的JSX语法、Props传递与默认值设置、组件生命周期方法，以及如何结合TypeScript进行类型检查和组件开发。通过示例代码讲解了TypeScript的编译流程、类型系统及其在React项目中的应用，帮助开发者构建更加健壮和可维护的应用程序。
002 学习鸿蒙应用开发ArkTs语言
热门推荐
龚礼鹏的博客
04-19 1万+
ArkTs是目前鸿蒙开发的主要语言，目前鸿蒙的主推模型Stage的新版本(3.1.0(API 9))开发不支持Java和JavaScript了，所以开发鸿蒙应用学习ArkTs是很有必要的。5分钟上手TypeScript · TypeScript中文网 · TypeScript——JavaScript的超集。
JavaScript 之实现一个简单的 Vue
前端大全
09-14 506
（点击上方公众号，可快速关注）来源：wclimbhttps://segmentfault.com/a/1190000016365102vue的使用相信大家都很熟练了，使用...
【vue3】vue3中如何使用typescript
qq_2511276124的博客
05-14 9095
现在vue3和typescript搭配使用是一个较常见的方案，下面参考vue3官网总结下在vue项目中使用ts(TypeScript)的方法。
【Vue3】（二）vue3语法详解：自定义泛型、生命周期、Hooks、路由
io_123io_123的博客
05-25 1396
Vue3技术要点总结：1.TS泛型详解，通过参数化类型实现类型约束；2.Vue3生命周期对比Vue2的变化，重点介绍setup、onMounted等新钩子；3.自定义Hooks的原理与实现，展示如何封装表单处理、数据请求等可复用逻辑；4.Vue3路由系统，包含路由配置、传参方式、编程式导航等核心用法。全文系统梳理了Vue3的核心特性，为开发者提供从类型定义到路由管理的完整技术方案。
Vue 构造器
cxu123321的博客
07-02 404
index.js import Loading from './loading'; const obj = {}; obj.install = function (Vue) { // 创建组件构造器 const LoadingConstructor = Vue.extend(Loading); // new的方式创建组件对象 const loading = new LoadingConstructor(); // 将组件对象挂载到某个元素上 ...
Vue-router原理:3、实现构造函数
tinglis的博客
03-06 651
Vue-router原理:3、实现构造函数 在介绍VueRouter的类图时，我们说过 Constructor是一个构造方法，该该构造方法中会初始化options ,data,routeMap这几个属性。 constructor(options) { this.options = options; this.routeMap = {}; this.data = _Vue.observable({ current: "/", }); }
Vue 构造函数
嘿嘿
04-26 6308
Vue 构造函数 我们知道，我们在使用Vue的时候，要使用new操作符进行调用，这说明Vue应该是一个构造函数，所以我们要做的第一件事就是：把Vue构造函数搞清楚。 #Vue 构造函数的原型 在了解 Vue 这个项目一节中，我们在最后提到这套文章将会以npm run dev为切入点： "dev": "rollup -w -c scripts/config.js -...
vue3 + ts 封装 axios 方法（包含重复请求，接口超时，重复请求接口间隔）
weixin_43386734的博客
05-24 680
这是参考 https://blog.youkuaiyun.com/qq_35624605/article/details/121074339 这位大佬的写法。这个方法涉及到 重复请求只执行一次 重复请求时间间隔 接口请求超时 等功能。应该可以做到复制即用，该有的注释我都加上了。以上就是 axios 的整体封装了。本人ts暂时不算很熟练，献丑了。并在这个基础上进行优化和改造。简单粗暴，直接上代码。
【学习笔记】Vue3（Ⅰ）
Eddie_hyh的博客
06-02 1077
Vue3（Ⅰ）
前端面试官 面试高级前端开发面试题及答案 （VUE2 和VUE3和 JS方面）
最新发布
07-19
- 引用[1]提到Vue3的变更，如全局API、模板指令、生命周期钩子等。我可以融入这些。 - 引用[2]提到React事件处理，但用户问的是Vue和JavaScript，所以我可能不直接使用它，除非相关。 回答大纲： 1. **引言**：简要...
Vue3+ts+hook.ts readonly只读属性，只可以在constructor里面进行修改
weixin_68903201的博客
11-30 686
【代码】Vue3+ts+hook.ts readonly只读属性，只可以在constructor里面进行修改。
Vue3+Typescript项目构建之Vuex模块化搭建（vuex-module-decorators）
徐忠炜的博客
01-30 2094
相比起Vue2项目构建Vuex模块化，Vue3 + Typescript构建Vuex模块化有着很大的不同。 安装vuex-module-decorators 这是一个帮助我们快速安全高效构建Vuex模块的npm包，官方文档。 npm install vuex-module-decorators # or yarn add vuex-module-decorators 在Vue CLI创建的项目中，记得在vue.config.js配置里添加转译配置(ES6 to ES5),并且兼容IE11。 // vue.
vue3前端开发系列(2) - 项目框架搭建篇(新手必看)
硅谷工具人
10-10 2891
如果两个文件(.env.development和.env.production)在src文件夹里面，那么可以通过在vite.config.ts文件中设置envDir的值为"./src",在**项目根目录(通常是src目录外面)**新建.env.development和.env.production两个文件。项目别名配置的时候需要用的 path 模块，而path模块是node.js的内置模块，node不支持TS。模式启动，所以读取到的是.env.development文件中的值。
vue实现原理
wenmin1987的博客
06-18 1500
1、建立一个vue类： 其constructor（options）包含 $el ---获取根对象 $option ---获取传递过来的options参数 $watchEvent --设置一个对象 保存修改更新事件 this.observe();//劫持事件（劫持属性-set(设置并触发watch的key更新事件) get(得值) 、 劫持方法） this.compile(this.$el...
Vue3源码学习之路-实现调度器
凉秋秋秋
09-05 427
Vue3源码学习之路-实现调度器
vue component created没有触发_详解在Vue中使用TypeScript的一些思考(实践)
weixin_39990401的博客
11-25 666
Vue.extend or vue-class-component使用 TypeScript 写 Vue 组件时，有两种推荐形式：Vue.extend()：使用基础 Vue 构造器，创建一个“子类”。此种写法与 Vue 单文件组件标准形式最为接近，唯一不同仅是组件选项需要被包裹在 Vue.extend() 中。vue-class-component：通常与 vue-property-decorat...
vue源码学习笔记2（resolveConstructorOptions）
weixin_33897722的博客
03-13 741
mergeOptions看完以后，回到initMixin来，注意到在mergeOptions函数中的parent参数是一个resolveConstructorOptions函数的返回值， vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, ...
【vue3常见报错7】Uncaught TypeError - xxx is not a constructor
朱远辉的博客
05-19 3755
【vue3常见报错7】Uncaught TypeError - xxx is not a constructor
VueCli3+TypeScript+Vuex构建TodoList教程
"本文将介绍如何使用VueCli3、TypeScript和Vuex构建一个简单的todoList应用。Vue3.x引入了对TypeScript的更强支持，因此掌握这种组合对于开发者来说变得至关重要。通过VueCli3创建项目可以确保项目具有官方维护的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值