![](https://img-blog.csdnimg.cn/20190927151053287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue 相关技术分享
Jason Ma丶丶前端工程师
一位喜欢分享技术的博主、主要技术栈为前端、后端也涉足一些
展开
-
vue3 shallowRef导致视图更新的问题解析
示例代码如下:在浏览器内,在 前面打个debug进入调试可以发现修改a.value时候,触发了vue3响应式函数的setter函数,setter函数内检测到有数据改变了,会去调用从而触发了试图的更新,所以当同时修改shallowRef定义的深层数据时,由于试图被触发了,msg的最新数据也会被更新到视图上所以当我们注释之后,就能达到正常的预期,修改深层数据而不会触发试图更新;官方推荐在修改shallowRef所定义的深层数据后,使用去主动触发更新,而不是通过这种不规范的方式。...原创 2022-06-09 11:05:13 · 916 阅读 · 1 评论 -
vue如何实现一个自定义组件的v-model,v-model原理解析
v-model指令的原理是什么?v-bind绑定一个value属性v-on监听当前元素的input事件,当数据变化时,将值传递给value实时更新数据v-model和v-bind:value有什么区别?自定义组件中,必定会使用v-bind指令来实现组件之间值的传递,所以在我还是菜鸟的那段时间,我一直有个疑惑, 既然有的v-bind指令,为什么还需要在自定义的组件中实现v-model指令呢?在我实践了一番之后,我才明白, v-model既能够实现值的传递,也能够实现页面数据的实时变化,而v-bin原创 2022-02-17 06:30:00 · 1428 阅读 · 0 评论 -
vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解(纯干huo)
方式1:定义全局的CSS变量App.vue:<style>/* 定义全局的css变量 */:root { /* 背景色 */ --theme_bg_color: red; /* 按钮颜色 */ --theme_button_color: yellowgreen;}</style>demo.vue(css):<style scoped> /* 使用全局的css变量设置颜色 */.myButton { background: va.原创 2021-12-26 06:30:00 · 17770 阅读 · 6 评论 -
在vue中使用HTML5 Web SQL 浏览器数据库
HTML5 Web SQL 数据库Web SQL 是在浏览器上模拟数据库,可以使用 JS 来操作 SQL 完成对数据的读写。\Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。核心方法以下是规范中定义的三个核心方法:openDataba原创 2021-12-25 06:30:00 · 932 阅读 · 0 评论 -
深入解读vue3 watch监听(踩坑记录)
直接上代码,总共测试了下面这些情况(看注释)<template> <h2>当前求和为:{{ sum }}</h2> <button @click="sum++">点我+1</button> <hr /> <h2>当前的信息为:{{ msg }}</h2> <button @click="msg += '!'">修改信息</button> <hr />原创 2021-12-21 07:00:00 · 893 阅读 · 0 评论 -
Vue2.x和Vue3.0中的响应式原理
vue2.x的响应式实现原理:对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。Object.defineProperty(data, 'count', { get () {}, set () {}})存在问题:新增属性、删除属性, 界面不会更新。直接通过下标修改数组, 界面不会自动更新。Vue3.0的响应式原创 2021-12-22 07:15:00 · 181 阅读 · 0 评论