vue-ssr-tech

vue-ssr-tech copied to clipboard

在第三章末尾引入了vue-loader之后都干了点啥?

1

我这一直cannot find element #root, 还有印象吗？

Jayj1997

想想console为什么是1，而不是2呢？ ``` var value = 1; var foo = { value: 2, bar: function () { return this.value } } console.log((false || foo.bar)()) // 1??? ``` 参考： https://github.com/mqyqingfeng/Blog/issues/7

valleylmh

 其基本实现原理： - app.js 作为客户端与服务端的公用入口，导出 Vue 根实例，供客户端 entry 与服务端 entry 使用。客户端 entry 主要作用挂载到 DOM 上，服务端 entry 除了创建和返回实例，还进行路由匹配与数据预获取。 - webpack 为客服端打包一个 Client Bundle ，为服务端打包一个 Server Bundle 。 - 服务器接收请求时，会根据 url，加载相应组件，获取和解析异步数据，创建一个读取 Server...

valleylmh

[参考一](https://github.com/jkchao/blog/issues/3) [参考二](https://github.com/jkchao/blog/issues/4) diff 的实现主要通过两个方法，patchVnode 与 updateChildren 。 patchVnode 有两个参数，分别是老节点 oldVnode, 新节点 vnode 。主要分五种情况： if (oldVnode === vnode)，他们的引用一致，可以认为没有变化。 if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text)，文本节点的比较，需要修改，则会调用Node.textContent = vnode.text。...

valleylmh

从两个问题出发： 建立与其他属性（如：data、 Store）的联系； 属性改变后，通知计算属性重新计算。 实现时，主要如下 初始化 data， 使用 Object.defineProperty 把这些属性全部转为 getter/setter。 初始化 computed, 遍历 computed 里的每个属性，每个 computed 属性都是一个 watch 实例。每个属性提供的函数作为属性的 getter，使用 Object.defineProperty 转化。 Object.defineProperty getter 依赖收集。用于依赖发生变化时，触发属性重新计算。 若出现当前 computed 计算属性嵌套其他 computed...

valleylmh

理解两点： 1、每个组件都是 Vue 的实例。 2、组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他。 详情可以参考工程目录里practice/data-bingding/index.js

valleylmh

1、先卸载重新安装webpack ``` npm uninstall webpack webpack-dev-server webpack-merge -D npm install webpack webpack-dev-server webpack-merge -D ``` 2、相关的npm包也需要更新 ``` npm uninstall babel-loader eslint-loader extract-text-webpack-plugin file-loader html-webpack-plugin url-loader -D npm install babel-loader eslint-loader...

valleylmh

先安装husky的npm包，然后记得*在当前工程目录下 git init*初始化 ``` npm i husky -D // package.json里面的script里面添加 "precommit": "npm run lint-fix" // 命令行git初始化 git init ```

valleylmh

### 1、增加.eslintrc文件，需要安装如下npm包： ```bash "babel-eslint": "^8.2.3", "eslint": "^4.19.1", "eslint-config-standard": "^11.0.0", "eslint-loader": "^2.0.0", "eslint-plugin-html": "^4.0.3", "eslint-plugin-import": "^2.12.0", "eslint-plugin-node": "^6.0.1", "eslint-plugin-promise": "^3.7.0", "eslint-plugin-standard": "^3.1.0", ``` ### 2、增加.editorconfig文件，代码编辑器需要按照插件 

valleylmh