项目整理——Vue电商平台开发

转自这位博主的文章

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节点进行一些需要的操作。