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

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

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

61. table设置圆角

• border-radius:5px; overflow:hidden;

62. img图片模糊处理办法：切高分辨率图，2倍的

63. 需要使用小写的前缀修饰属性或者方法 webkit (谷歌, Safari, 新版Opera浏览器等) moz (火狐浏览器) o (旧版Opera浏览器等) ms (IE浏览器 和 Edge浏览器)

64. 变量中空格输出，用v-html，可以输出转义字符，
    css: white-space: pre;也可以，但是不能控制中英文

65. apply和call的使用和区别

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

参考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,

66. mysql数据库慢，优化配置
    https://www.jb51.net/article/19464.htm

67. 列表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

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

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}

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

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

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

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

70. package.json和package-lock.json

• 相同：npm i的时候根据这两个配置去安装和更新依赖

• 不同点：
  package.json文件只能锁定大版本，即版本号的第一位，不能锁定后面的小版本，你每次npm install时候拉取的该大版本下面最新的版本，可能有些童鞋之前就踩过类似的坑。

• 一般为了稳定性考虑我们不能随意升级依赖包，因为如果换包导致兼容性bug出现很难排查，所以package-lock.json就是来解决包锁定不升级问题的。

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

• npm install [email protected]

72. 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

73. 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够熟悉，理解框架原理，大厂也好进

74. 学习的三个境界：学明白，写出来，不仅写能讲出来
    逼自家看源码，看完之后，一片坦途

75. 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很重

76. 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)]

77. 老师分享

• 学习建议：

  • 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)]

78. npm查看全局安装的包
    npm list -g --depth 0

79. dependencies和devDependencies的区别

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

80. npm i和npm install的区别：

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