多想有个林夕-CSDN博客

原创 vue2源码学习（二）双向绑定

当然只讲一下渲染流程，具体的深度优化，和diff算法有兴趣的朋友可自己去看一下。结合上面的get与set，可以发现设置的每一个属性都有自己的Dep。当我们在Set更新数据之后中，dep通过notify来通知其变化，双向绑定的大概思路就是这样的了。当然上面只是一个非常基础的拦截，vue2中还要考虑到很多其他的因素，比如深度监听，多个属性监听。这里，就是具体设置拦截的地方了，是不是大概和我们上面的有点类似，只是多了许多其他的。这样，我们可以想一下思路，大概是这样拦截的。在vue官方中是这样描述的。

2023-07-25 14:06:33 196

原创 Vue3 项目中使用composition api进行传值与监听

vue 的官方已经把vue3设置为默认架构了，但是在平时，发现好多伙伴还是不知道怎么使用这个，来快速和清晰开发项目，现在我大概为大家介绍一下，如何使用Vue3的特性。这样使用，在平时开发中少了很多监听prop中的值，或者是父子传值，子孙传值之类麻烦的事情。当然这只是在项目中一种比较合理的方式，如果有其他好用的写法，可以在评论区交流一下。在子组件点击修改名称，发现父组件的值直接改变了，这样就少了传值的功夫。然后，我们就可以直接在子组件或者父组件中引用他们。点击修改，发现确实触发了Watch。

2023-07-25 09:52:44 215

原创 vue2源码学习（一）Vue构造函数

compiler单独抽离也是减小了库的体积，而且允许你在代码运行的时候去现场编译模板，在不配合构建工具的情况下可以直接使用。看到这里，Vue构造函数基本上就过了一遍了，这一块还是比较简单的，有基础的朋友大概过一次就知道了。用户在界面上操作点击按钮时，首先是点击的视图，从View到Controller 层，完成逻辑后，到Model改变状态，然后由Model再通知视图。看到启动是这么一行，rollup是一个vue用的打包器，比webpake配置简单一些，有兴趣的可以看一下它的官网。

2023-07-24 16:10:52 403

原创微前端的简单实现

最近项目中遇到了一个问题，那就是老项目和新项目迭代的问题。老项目能正常用，但是新的项目要替换，原有的功能集成在新项目直接使用会影响到进度。于是想到了用微前端，将新的老的放在不同的项目中运行。框架当然是用的qiankun，这是我认为国人比较习惯，也比较成熟的框架了。参考https://qiankun.umijs.org/zh...

2021-09-07 16:55:52 198

原创 vue2中接入讯飞语音听写

首先先登录https://www.xfyun.cn/，在控制台中创建自己的app，并且拿到APPID。下载crypto-js 与线程workernpm install crypto-jsnpm install worker-loader官网中有示例文件，稍微改造一下，封装成组件就能使用了。transcode.worker.js文件/* * @Autor: lycheng * @Date: 2020-01-07 08:51:50 */(function(){ sel

2021-08-19 11:26:39 1725 4

原创 2021年vue面试问题及实践使用问题。

金九银十，又是一轮跳槽季。面试的人挺多，总结了一下面试初中级问题。css 与 html一些简单的问题这里就不作叙述。问的最多的，就是水平，垂直居中问题。笔者在项目中用的比较多的是flex display: flex;justify-content: center;align-items: center; 其次就是margin autoposition: absolute;top: 0;left: 0;bottom: 0;right: 0;posit

2021-08-13 14:13:58 195

原创 VUE中引入富文本，并操作节点。

中文文档：http://tinymce.ax-z.cn/1.下载yarn add tinymce || npm install tinymce -Syarn add @tinymce/tinymce-vue || npm install @tinymce/tinymce-vue -S汉化包https://www.tiny.cloud/get-tiny/language-packages/这里我没有用到汉化，样式也没用到，如需用将node_modules/tinymc...

2021-07-16 19:42:05 260

原创用websocket简单实现一个类似Notification的提示框

最近项目中有用到类似于Notification的东西。看过代码之后，发现它更像是一个插件。想要自定义里面的样式或者内容都不好写。于是在项目中简单的自己写了一下。第一步，先在store中声明一个显示Notification的布尔值。再在页面中声明一个变量，用computed监听store中的值.第二步，创建一个文件，将其定位到右上角，并且用CSS写一个过渡动画。第三步，当websocket发消息时，将store中的值变为true。并在页面创建一个计时器，用来关闭。...

2021-07-16 19:23:33 278

原创 VUE简单实现一个虚拟滚动。

最近项目中有用到vue3中的虚拟滚动，但中间又用到了动态行高。找了找网上的虚拟滚动插件都不太适用，只好自己写了一个乞丐版能满足自己需求的东西。具体思路就是将全部数组切分一下，只取渲染的数组，然后滚动时，再设置偏移量，使其滚动。1. 创建一个组件，将需要虚拟滚动的数组传入进来。获得屏幕的高度，然后再算出能展示的最大数量。2。获取滚动的高度，再切分数组，设置偏移量。这样，一个简单的虚拟滚动就实现了。...

2021-07-16 19:12:36 1207

原创 vue中用webworker子线程连接websocket并实现数据自动更新

第一步先在store中声明好需要存储的数据。 state: { testName: 'hello', },mutations: { setTestName(state, name) { state.testName = name }}创建一个worker文件，连接websocketlet WSlet lockReconnect = false // 避免重复连接const webWorkerSelf = selfco...

2021-07-13 20:49:52 1948 3

原创 VUE3中使用vxe-table,并且创建自定义筛选组件

最近公司前端数据需要用到表格展示，又要在前端做筛选过滤排序。考虑到表格性能原因，最终选择了vxe-table 第一步先打开

2021-07-11 15:54:31 9955 1

weixin_50395373的博客