转自这位博主的文章
1.MVVM开发模式
Movel:数据模型,数据和业务逻辑在该层中定义
View:视图层,负责数据的展示
ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作
这种模式实现了Model和View的数据自动同步,当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。
2.v-if和v-show的区别
相同点:都可以动态控制dom元素的显示与隐藏
区别:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性为block或none控制显隐,元素还在
多次用v-show,一次性用v-if
3.组件内部实现双向数据绑定(父子组件传值)
①props+emit
父组件通过props传值给子组件,子组件通过emit触发某些事件从而在父组件中修改该数据
这位博主的文章写的很通俗易懂
注意:子组件不能直接改变父组件传来的值,解决方法在子组件的data中,重新赋值,然而需要用watch来监听父组件的值是否发生变化
prop的缺点:prop 是单向绑定的,当父组件的属性变化时,将传导给子组件,但是不会反过来;每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。
②v-model
4.监控某个属性值的变化
①watch属性进行监听
②用computed实现
5.Vue中给data中的对象属性添加一个新的属性时会发生什么?
导致:可能视图并没有更新
原因:在VUE实例创建的时候,这个属性没有声明,因此就没有被VUE转化为响应式的属性,就不会触发视图的更新。
解决方法:使用VUE的全局API,this.$set()
6.delete和vue.delete删除数组的区别
delete:被删除的元素的值被清掉,但是其他元素的键值不变
vue.delete:直接把该元素删除,后面的元素前移
7.优化
配置路由的时候,页面和组件使用懒加载的方式引入
8.前端如何优化网站性能
①减少HTTP请求数量
原因:浏览器与服务器通信时,需要经过三次握手,花费大量时间
具体做法:CSS精灵,将多张照片合并成一张;通过打包工具合并CSS文件或者JS文件;懒加载,一些内容可以等到用户操作的时候再加载内容
把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样处理图片后,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
②控制资源文件加载的优先级
CSS文件放在头部,JS文件放在底部
③利用浏览器缓存
将网络资源存储在本地,下次请求资源时,若本地存在该资源,则不需再去服务器重新请求
9.网页从输入网址到渲染完成经历什么过程
输入网址;
发送该地址到DNS服务器,并获取域名对应的web服务器对应的ip地址;
与web服务器建立TCP连接;
浏览器向web服务器发送HTTP请求;
web服务器响应请求,并返回指定URL的数据(或错误信息,或重定向的新的URL地址);
浏览器下载web服务器返回的数据及解析HTML源文件;
生成DOM树,解析CSS和JS,渲染页面,直至显示完成。
常见状态码
1XX:接收的请求正在处理
2XX:请求正常处理完毕
3XX:重定向状态码,需要进行附加操作以完成请求
4XX:客户端发生错误,服务器无法处理请求
5XX:服务端处理请求出错
具体状态码
200:请求成功;处理方式:获得响应的内容,进行处理
204:请求处理成功,但没有资源可返回
301:处理方式:重定向到一个永久性的URL
302:处理方式:重定向到一个临时性的URL
304:请求的资源没有更新,可直接使用客户端未过期的缓存
404:服务器上没有请求的资源
500:服务器内部错误
502:错误网关
503:由于临时的服务器维护或过载,暂时无法处理请求
10.axios
①安装:npm install axios --save
②在入口main.js中导入axios,并将axios写入vue的原型,便于使用
import axios from 'axios'
Vue.prototype.$ajax= axios
③this.axios.post('请求接口‘).then((response) => {
}).catch((response) => {
})
11.VUE中兄弟组件传值:用事件车bus
12.created和mounted的区别
created先于mounted
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。