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

最新推荐文章于 2024-05-24 17:24:56 发布
最新推荐文章于 2024-05-24 17:24:56 发布
阅读量7.9k 收藏 2
点赞数
分类专栏： typescript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ArthurKing01/article/details/85624137
版权

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

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

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

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

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

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

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

ArthurKing01
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli3+typescript新建一个项目的思路分析
10-16
主要介绍了vue-cli3+typescript新建一个项目的思路，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
10-16
主要介绍了使用VueCli3+TypeScript+Vuex一步步构建todoList的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3 10多种组件通讯方法
weixin_39415598的博客
06-24 1483
本文简介 点赞 + 关注 + 收藏 = 学会了 本文讲解 Vue 3.2 组件多种通讯方式的基础用法，并且使用了 单文件组件 <script setup> 。 众所周知，Vue.js 中一个很重要的知识点是组件通信，不管是业务类的开发还是组件库开发，都有各自的通讯方法。 本文适合： 有 Vue 3 基础的读者。 打算开发组件库的读者。 本文会涉及的知识点： Props emits expose / ref Non-Props v-model 插槽 slot provide
【vue3常见报错7】Uncaught TypeError - xxx is not a constructor
朱远辉的博客
05-19 2554
【vue3常见报错7】Uncaught TypeError - xxx is not a constructor
TS中constructor使用public 、private 关键字
最新发布
weixin_42776027的博客
05-24 320
结论：无论何时在构造函数参数上指定public或private,都会在类上创建相应的公共/私有变量,并使用参数的值填充该变量.关键字时，Angular会自动为你的组件或指令创建一个注入实例，并将其作为构造函数参数的私有属性。两个示例生成的JavaScript将是相同的.但是,如果您尝试访问代码中的私有变量,编译器将抛出错误.：通过这种方式，可以清楚地看到哪个依赖是必要的，以及它是如何在组件或指令中使用的。类型的依赖，并会在编译时检查类型，确保你不会错误地注入其他类型的服务。：Angular知道你需要的是。
Vue3源码学习之路-实现调度器
凉秋秋秋
09-05 347
Vue3源码学习之路-实现调度器
为什么vue3中去掉了vue构造函数？
qq_54127702的博客
09-20 181
2. vue2的构造函数集成了太多功能，不利于tree shaking，vue3把这些功能使用普通函数导出，能够充分利用tree shaking优化打包体积。3. vue2没有把组件实例和vue应用两个概念区分开，在vue2中，通过new Vue创建的对象，既是一个vue应用，同时又是一个特殊的vue组件。vue3中，把两个概念区别开来，通过createApp创建的对象，是一个vue应用，它内部提供的方法是针对整个应用的，而不再是一个特殊的组件。
vue实现原理
wenmin1987的博客
06-18 1286
1、建立一个vue类： 其constructor（options）包含 $el ---获取根对象 $option ---获取传递过来的options参数 $watchEvent --设置一个对象 保存修改更新事件 this.observe();//劫持事件（劫持属性-set(设置并触发watch的key更新事件) get(得值) 、 劫持方法） this.compile(this.$el...
Vue双向数据原理
FengYang_的博客
09-17 373
双向数据原理 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调 双向数据流程 1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者 2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数 3、实现一个Watcher，作为连接Observer和Compile的
JavaScript 之实现一个简单的 Vue
前端大全
09-14 426
（点击上方公众号，可快速关注）来源：wclimbhttps://segmentfault.com/a/1190000016365102vue的使用相信大家都很熟练了，使用...
使用vue-cli3+typescript的项目模板创建工程的教程
10-15
Vue CLI 3 提供了一种快速、高效的方式来初始化项目，而TypeScript则能帮助你编写更健壮、可维护的代码。在实际开发中，根据项目需求，你还可以自定义更多的配置，如引入其他插件、调整打包设置等。持续学习和掌握...
TypeScript快速上手语法+结合vue3用法
zhangxueyou2223的博客
02-25 5096
本篇内容不涉及TypeScript安装以及配置，具体安装及配置篇可以看下面目录，本篇只涉及TypeScript语法相关内容，及结合vue3的用法。不讲废话，简单直接直接开撸。
Vue 构造函数
嘿嘿
04-26 5996
Vue 构造函数 我们知道，我们在使用Vue的时候，要使用new操作符进行调用，这说明Vue应该是一个构造函数，所以我们要做的第一件事就是：把Vue构造函数搞清楚。 #Vue 构造函数的原型 在了解 Vue 这个项目一节中，我们在最后提到这套文章将会以npm run dev为切入点： "dev": "rollup -w -c scripts/config.js -...
7、Vue实例的生命周期钩子（created、mounted、updated、destoryed）
weixin_45065754的博客
04-11 644
1、Vue实例 new Vue()创建一个Vue实例 所有的组件其实都是Vue实例 2、Vue实例的生命周期钩子 每个Vue实例在被创建时都要经过一系列的初始化过程 初始化过程 created() 组件初始化完成，比较常用 mounted() 模板已经创建，比较常用 updated() 模板数据更新 destoryed() 实例销毁 3、生命周期钩子的作用 页面加载的时候，主动执行某些程序，提前加载获取数据显示到页面 4、通过计时器，模拟一个ajax异步加
Vue3+TypeScript从入门到精通系列之：类多态
zhengzaifeidelushang的博客
02-12 684
Vue3+TypeScript从入门到精通系列之：类多态一、TypeScript类多态代码二、TypeScript的类多态转化为JS代码三、查看js输出 一、TypeScript类多态代码 (() => { //多态：父类型的引用指向了子类型的对象，不同类型的对象针对相同的方法，产生了不同的行为 //定义一个父类 class Animal { name: string constructor(name: string){ this.name = name } //实例方法
vue中什么是created钩子函数，以及使用场景
m0_65069237的博客
10-11 1365
总结：created是Vue实例创建后的一个重要阶段，在该阶段可以进行数据初始化、网络请求、事件订阅等操作，适用于各种场景，对于组件的初始化和数据准备非常有用，嗯目前我只理解了前两个因为调用接口需要axios和初始化请求，后续遇到更多的事件也会持续的更新。3. 进行订阅和监听：可以在created阶段进行事件的订阅和监听，例如监听window对象的resize事件或者订阅其他组件的事件。2. 发送网络请求：在created阶段可以发送异步请求获取数据，并将获取到的数据保存到data中，以供组件中使用。
Vue3 + TS(二)
m0_51328823的博客
02-04 2318
Vue3 vue3的新特性 首先是向下兼容，Vue3 支持大多数 Vue2 的特性。 性能的提升，内存减少55%、打包大小减少41%、渲染快、使用Proxy实现数据响应式，重构虚拟dom 新推出的Composition API(组合 api)，在 Vue2 中遇到的问题就是复杂组件的代码变的非常麻烦，甚至不可维护。说白了就是封装不好，重用不畅。 其他新特性：Teleport(瞬移组件)、Suspense(解决异步加载组件问题)和全局 API 的修改和优化。 更好TypeScript支持。
Vue3+ts+hook.ts readonly只读属性，只可以在constructor里面进行修改
weixin_68903201的博客
11-30 573
【代码】Vue3+ts+hook.ts readonly只读属性，只可以在constructor里面进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值