- 博客(14)
- 收藏
- 关注
原创 实践继承模式
组合继承优点:融合原型链继承和构造函数的优点,是 JavaScript 中最常用的继承模式。function Parent (name) { this.name = name; this.colors = ['red', 'blue', 'green'];}Parent.prototype.getName = function () { console.log(this.name)}function Child (name, age) { Parent.ca
2020-09-17 12:03:13
380
原创 双向绑定补充 (v-model)分析
v-mode最后实际上是在当前实例(el)上添加addAttr(el, ‘value’, (${value})) 相当于(el.prop)addHandler(el, event, code, null, true) (el. event)实际v-mode相当于读法糖最后生成代码描述:"_c('div',[_c('input',{directives:[{name:"model",rawName:"v-model",value:(message),expression:"message"}],
2020-09-10 16:19:07
299
原创 响应式与双向绑定区别
有很多同学把双向绑定就等同于响应式 , 其实是不对 的。在这里我们分析 一下 二者的区别:响应式:响应式 单身的 (数据流向视图)它是通过 Object.defineProperty()实现的特别要指出的是 , option.data 中的选项都会被响应式,都会有一个观察者目标(dep)实例 , 但不是所有的选项都能被收集响应式 依赖,只有当你getter 才会去收集选项依赖, setter时 , 派发依赖更新, 实际上为通知当前渲染watcher更新视图。双向绑定(v-model)
2020-09-09 15:13:13
4129
原创 依赖收集
首先 要所有 option.data都会被proxy,但 只有执行get的时候才会去收集依赖 ,且一个组件只有一个watcher , 由于js是单线程,所以一个时刻只有一个watcher在执行那么vue 是怎么收集依赖的呢可以当页面执行 mountComponent的时候 ,触发Object.defineProperty的函数const dep = new Dep()一个option.data 选项会有一个dep 实例if (Dep.target) { dep.de
2020-09-05 18:20:44
610
原创 Eslint vetur prettier格式化
1.Eslint : 代码质量检查vetur : 高亮标记不同的代码prettier: 代码风格检查同时用Eslint 和 prettier 会出来配置冲突 ,要安装 "eslint-plugin-prettier": "^3.1.3",来解决备注: 要特别指出的是 ,如果用vue-cli 创建项目, 选择了Eslint + prettier , 之后 在vscode 中不需要 再次安装网上好多 写的教程都再次安装 是错误 的 , 而加重了冲突。...
2020-09-05 16:34:50
327
原创 vue2.x 是怎么让普通对象变为 响应式对象的呢
function initData (vm) { var data = vm.$options.data; data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}; if (!isPlainObject(data)) { data = {}; process.env.NODE_ENV !== 'production' && warn( .
2020-09-02 19:52:35
2274
原创 toRawType
/** * Get the raw type string of a value, e.g., [object Object]. */const _toString = Object.prototype.toStringexport function toRawType (value: any): string { return _toString.call(value).slice(8, -1)}尤大大 这个 方法 不能 区分普通对象和实例思考:普通对象和实例怎么区分...
2020-08-28 18:45:21
348
原创 javascript如何判断对象是否存在某属性
对于 一级的object 可用:inhasOwnProperty()那对于 多级 的思考呢:{ value: "zhinan", label: "指南", name: 'lxf', children: [ { value: "shejiyuanze", label: "设计原则", adress: 'mb',
2020-08-13 16:19:57
208
原创 关于环境变量在客户端能获取
development 模式用于 vue-cli-service serveproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2etest 模式用于 vue-cli-service test:unit关于.env , .env.development , .env.production 注意点:NODE_ENV 已经默认了变量必须 VUE_APP_XXX = XXX 形势.env , .env.developme
2020-08-13 11:13:18
140
原创 对象 路径
场景: {value: “zhinan”,label: “指南”,children: [{value: “shejiyuanze”,label: “设计原则”,children: [{value: “yizhi”,label: “一致”},{value: “fankui”,label: “反馈”},{value: “xiaolv”,label: “效率”},{value: “kekong”,label: “可控”}]},{value: “daohan
2020-07-30 16:27:43
172
原创 Vue CLI 3 可以使用 TypeScript 生成新工程
1. 如果没有安装 Vue CLI 就先安装npm install --global @vue/cli2. 创建一个新工程,并选择 “Manually select features (手动选择特性)” 选项vue create my-project-name
2020-07-11 18:19:48
219
原创 解决vue-cli3.0新建项目无法选中Manually select features
解决方法:按官网提示的 使用winpty vue.cmd create hello-world 命令创建项目,向下箭头选中Manually select features配置项,最后点击Enter会弹出可配置项。官网提示:如果你在 Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。请参考vue-cli3...
2020-07-08 10:21:23
2865
原创 一直发送这个请求http://localhost:8080/sockjs-node/info?t=1534834909495;报失败是什么原因?
一直发送这个请求http://localhost:8080/sockjs-node/info?t=1534834909495;报失败是什么原因?热重载的问题node_modules\sockjs-client\dist\sockjs.jstry {//self.xhr.send(payload);} catch (e) {self.emit(‘finish’, 0, ‘’);self...
2020-04-28 21:59:55
2762
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人