- 对象中添加属性,刷新的问题
- 利用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…)
参考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题目:值传递和引用传递
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模板限制
<ul>
<li is='my-component'></li>
</ul>
- Ul中只能放li,而不能像下面,
<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 [email protected]
- 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+随机数+过期+过期事件)
-
- 注销登录
-
- 过期了
-
- 路由控制 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部署
常见的优化策略:原则
- ①文件加载更快
- ②文件加载后怎么能修改更少
- 具体:
-
- 大数组或Object使用Object.freeze() 性能优化,内部是get,set前返回
-
- v-once,优化更新性能
-
- 长列表优化 virtual-scroll-list虚拟列表上下3-5屏数据
-
- 减少watch deep的使用
-
- v-if和v-show的选择使用
-
- 使用v-for,为item设置唯一key
-
- 大项目SSR服务端渲染
-
- 路由组件懒加载、图片的按需加载
-
- 加载时设置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