vue面经复习

vue生命周期钩子

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeDestory
  8. destroyed

vue父子传值和子父传值

引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:

  1. 父组件向子组件进行传值
    在子组件中定义一个props,在父组件中引入子组件,并传入子组件内需要的值
    (子组件通过 props 属性,绑定父组件数据,实现双方通信。)

  2. 子组件向父组件进行传值
    子组件用“$emit()”来触发事件,父组件用”$on()“来监听子组件事件。
    使用 v-model 指令。
    (将父组件的事件在子组件中通过 $emit 触发。)

双向绑定的原理

原理上是通过数据劫持,也就是Object.defineproperty()来劫持各个属性的setter和getter,在数据变动时发布消息给订阅者

什么是MVVM

  1. 各部分之间的通信,都是双向的
  2. 采用双向绑定: View 的变动,自动反映在 ViewModel,或 model 的变动也会反映在 ViewModel中

v-if 和 v-show 区别

最大的区别就是v-show不论是true还是false,html模版都会进行渲染,而v-if只有为true才进行渲染
v-show 控制的是 CSS 中的 display属性
在性能上也是有差别的。

计算属性 computed 和事件 methods 有什么区别

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果,两种方式是相同的。

不同点:
computed:计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值。
method:只要发生重新渲染, method 调用总会执行该函数。

对 keep-alive 的了解

keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

Vue 等单页面(SAP)应用的优缺点

优点:

  • 良好的交互体验
  • 良好的前后端工作分离模式
  • 减轻服务器压力

缺点:

  • SEO 难度较高
  • 前进、后退管理
  • 初次加载耗时多

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

nginx反代静态资源404解决方案


写了几个 Node.js 的项目,想要用 NGINX 反向代理nodejs端,但是出现了静态文件404的问题。
记录一下解决方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
upstream  node {
server localhost:3000; # Node.js 的地址
keepalive 64;
}
server{
listen 80;
server_name 域名 ;
location / {
proxy_pass http://node;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
#持久化连接相关配置
#proxy_connect_timeout 30s;
#proxy_read_timeout 86400s;
#proxy_send_timeout 30s;
#proxy_http_version 1.1;
#proxy_set_header Upgrade $http_upgrade;
#proxy_set_header Connection "upgrade";
expires 12h;
}
}