web前端学习/工作笔记(四)

对象中添加属性，刷新的问题

利用this.$set(this.obj,key,val)

table设置圆角

border-radius:5px; overflow:hidden;

img图片模糊处理办法：切高分辨率图，2倍的
需要使用小写的前缀修饰属性或者方法 webkit (谷歌, Safari, 新版Opera浏览器等) moz (火狐浏览器) o (旧版Opera浏览器等) ms (IE浏览器和 Edge浏览器)
变量中空格输出，用v-html，可以输出转义字符， css: white-space: pre;也可以，但是不能控制中英文
apply和call的使用和区别

功能相同，都是为了改变调用者内部
this的指向，只是参数不同，apply(obj,arr), call(obj, parm1,parm2…)

代码语言：javascript复制

参考1：https://www.jianshu.com/p/80ea0d1c04f8
参考2：
var arr1=[1,2,3];
  var arr2=[4,5,6];
  arr1.push.apply(arr2,arr2); //把arr1改成了arr2
  alert(arr2)//4，5，6,4,5,6
  alert(arr2)//4,5,

mysql数据库慢，优化配置 https://www.jb51.net/article/19464.htm
列表key问题

使用v-for渲染元素时，使用元素自身的id属性去指定渲染元素的key值有利于单个元素的重新渲染，若采用其他如v-for提供的index, key等值，在改变渲染出来的DOM结构时，会触发所有元素的重新渲染，当数据过大时，可能会造成性能负担。(默认没有id，用index和key并不行，v-for="(item, key, index) in items"，key即为name)
参考：https://www.cnblogs.com/tim100/p/7262963.html Diff原理：https://www.jianshu.com/p/4bd5e745ce95

js题目：值传递和引用传递

代码语言：javascript复制

function Person(name,age,salary){
this.name=name;
this.age=age;
this.salery=salary;
}
 function f1(person){
person.name="ls";
person=new Person("aa",18,10);//new了一个新的空间, p.name和person.name分别为’ls’和’aa’
}
var p=new Person("zs",9,5);
console.log(p)// Person {name: "zs", age: 9,  salery: 5}
f1(p)
console.log(p)// {name: "ls", age: 9, salery: 5}

is特性和用法，解决html模板限制

代码语言：javascript复制

<ul>
  <li is='my-component'></li>
</ul>

Ul中只能放li，而不能像下面，

代码语言：javascript复制

<ul>
<my-component></my-component>
</ul>

package.json和package-lock.json

相同：npm i的时候根据这两个配置去安装和更新依赖
不同点： package.json文件只能锁定大版本，即版本号的第一位，不能锁定后面的小版本，你每次npm install时候拉取的该大版本下面最新的版本，可能有些童鞋之前就踩过类似的坑。
一般为了稳定性考虑我们不能随意升级依赖包，因为如果换包导致兼容性bug出现很难排查，所以package-lock.json就是来解决包锁定不升级问题的。

如果要升级package-lock.json里面的库包，怎么操作呢？

npm install XXX@x.x.x

Vue.Js最佳实践 2019.5.30

1.vue-cli
2.数据mock 跨域,假数据 (nginx代理转发跨域)
3.工作流 githook eslint
4.webpack 模块化原理
5.vuex 写的源码
6.router 看了源码
7.jwt中的具体操作：
- 登录后获取token并缓存
- 网络拦截器
- 发送请求带token，决定是否清除token(一段对称加密字符串)
- Token:加密函数 (用户id 随机数过期过期事件)
  1. 注销登录
  2. 过期了
路由控制 addRoutes
mock:做假数据
render优先级比template高
easy-mock :假数据模拟网站
lint-staged:每次只校验git修改的东西
jwt（json web token）配合axios 权限控制
typescript和docker今年一定要学
问题：render和template的区别？
- 后者适合逻辑简单，前者适合复杂逻辑。
- 后者属于声明是渲染，前者属于自定Render函数。声明式渲染，使用者理解起来相对容易，但灵活性不足；自定义render函数灵活性高，但对使用者要求较高。
- 前者的性能较高，后者性能较低。这一点我们可以看一下，下图中vue组件渲染的流程图可知。
- 基于上一点，我们通过vue组件渲染流程图知道，使用render函数渲染没有编译过程，相当于使用者直接将代码给程序。所以，使用它对使用者要求高，且易出现错误。 Vue express? Node服务器思考：尝试看vuex源码前端书：红宝书，你不知道的js

Vue全家桶store,router,components（vue源码讲解）

initState 很重要(src-core-instance-state)
src 页面文件夹
compiler 生成虚拟dom
$mount执行
虚拟dom：用js的对象，去描述真实的dom
对象到渲染真实dom的过程叫render
Keep-alive 主要是cacke key
双向绑定原理：
- 实现observe get获取值，set设置值
- 实现watcher
插槽和模板：相同的地方用模板，不同的地方用插槽
Js够熟悉，理解框架原理，大厂也好进

学习的三个境界：学明白，写出来，不仅写能讲出来逼自家看源码，看完之后，一片坦途
Vue性能优化和docker部署常见的优化策略：原则

①文件加载更快
②文件加载后怎么能修改更少
具体：
1. 大数组或Object使用Object.freeze() 性能优化，内部是get,set前返回
2. v-once，优化更新性能
3. 长列表优化 virtual-scroll-list虚拟列表上下3-5屏数据
4. 减少watch deep的使用
5. v-if和v-show的选择使用
6. 使用v-for，为item设置唯一key
7. 大项目SSR服务端渲染
8. 路由组件懒加载、图片的按需加载
9. 加载时设置loding条
思想：原则上不操作dom，因为dom很重

SSR : seo ,首屏优化；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IwuFtV40-1579275147060)(https://note.youdao.com/yws/res/3377/CEA3982615E44389884B78A432DCB0DC)]
Nuts.js, SSR最佳实践框
同步应用：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QZIaM94O-1579275147060)(https://note.youdao.com/yws/res/3383/77CE3F22657C4BCA9F7C9015ED35829D)]

老师分享

学习建议：
- 2019必学docker，虽然是运维做的，但是自己会的话，可以提升自己在公司的影响力，提高薪资
- 必学typescript，vue3 ,react都用这个实现
  - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iquDZ7a7-1579275147061)(https://note.youdao.com/yws/res/3386/B81E24253B06498E889148CE1662C5CF)]
  - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XCHmJ0pe-1579275147063)(https://note.youdao.com/yws/res/3388/4403D7F7811048B485CC594B829151E9)]
wechaty，部署向微信群发送消息
前端学习路线
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WI0YRUVn-1579275147065)(https://note.youdao.com/yws/res/3392/E269EBF2347D4E9189C9B49FA0D69E0B)]
学习经验分享
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gxl7pb9J-1579275147065)(https://note.youdao.com/yws/res/3396/D0E74BDA8BE6455396C8D059ACBFE395)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9QDgMZto-1579275147065)(https://note.youdao.com/yws/res/3398/E9CCF8BF462A414E9B11C676CFA7B484)]
算法学习 bfs和dfs :深度优先和广度优先,贪心算法和动态规划很重要，动态规划可以解决很复杂的问题
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rz5UaFiw-1579275147066)(https://note.youdao.com/yws/res/3404/145D26C8812041939D17FDB2B6369FFE)]
软技能
- 写两年代码可以是软件工程师，写10年不一定成架构师，但是写两年代码，学学设计模式和算法，可以成架构师
多个项目权限管理：SSO单点登录
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-efsqtVX0-1579275147069)(https://note.youdao.com/yws/res/3410/3C1E5BA4EB46403B98C5567D2539664C)]

npm查看全局安装的包 npm list -g --depth 0
dependencies和devDependencies的区别

前者是运行时需要的依赖项，后者是开发时需要的依赖项。
- npm install //默认安装两种依赖
- npm install –production //单纯使用，不需要测试只安装dependencies
- npm install packagename //只安装dependencies
- npm install packagename –dev //两种都会安装
- npm install packagename -save-dev //只安装devDependencies，如果dependencies里有，会删除

npm i和npm install的区别：

经测试，相同，npm i安装的也可以通过npm uninstall

npm https 网络安全 javascript 渲染

0 人点赞