Vue语法相关问题

记录Vue的特性

列表渲染

v-for用于组件时，key必须要传

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()

1
2
3
4

this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

v-for优先级高于v-if，所以两个一起使用的时候，可以按需渲染

条件渲染

和v-for一样只能通过指令的形式写在dom元素或组件中(自定义组件或内置组件)

过滤器

这个很关键，敲黑板：只能用于插值和v-bind中！！

坑位：过滤器的实现，后面再添加

事件

组件上一般会绑定自己抛出的事件，如果想绑定原生事件，需要通过.native修饰符

可以使用其他修饰符，比如.enter,.keyup减少代码量

修饰符.sync是一个语法糖，在父组件中不需要通过v-on来监听事件，在子组件内改变了值之后还是需要显式地抛出事件，

1
2
3

<comp :foo.sync="bar"></comp> // 父组件调子组件
this.$emit('update:foo', newValue) // 子组件抛出事件

使用一些组件绑定事件的时候，如果本身的事件不行，就加.native修饰符

表单

• 输入框：绑定输入的值
• 单选：绑定单选的value值
• 复选框：单个为逻辑值，多个为value组成的数组
• 下拉框：绑定option的value，如果option没有value，则是option的text

• 表单修饰符：.number,lazy,trim

  1 2 3

  <input v-model.trim="msg"> // 去掉空格 <input v-model.number="msg"> // 转为小数 <input v-model.lazy=""> // input触发改为change触发

• 组件实现v-model，也是语法糖，

  1 2 3 4 5 6 7 8 9 10 11 12

  <comp v-model="something"></comp> { ... prop: ['value'], methods: { change (val) { this.$emit('input', val) } } ... }

• 对于组件内有单选框、复选框的情况，如果按这种写法来写，需要加model属性

  1 2 3 4 5 6 7 8 9 10 11

  { ... model: { prop: 'checked', event: 'change' }, props: { checked: Boolean, value: String } }

数据

用到的数据必须在data中先声明，如果不知道初始值，置空或者null

组件

组件写法

slot是在子组件留的坑位，在父组件可以根据需求灵活地传入，包括具名插槽和作用域插槽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 子组件留slot坑位
<div>
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>
// 父组件调用给子组件分发内容
<app-layout>
    <h1 slot="header">这里可能是一个页面标题</h1>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
    <p slot="footer">这里有一些联系信息</p>
</app-layout>
// 作用域插槽和具名插槽区别是一个是name,一个是text
<ul>
  <slot name="item"
    v-for="item in items"
    :text="item.text">
    <!-- 这里写入备用内容 -->
  </slot>
</ul>
<my-awesome-list :items="items">
  <!-- 作用域插槽也可以是具名的 -->
  <li 
    slot="item" 
    slot-scope="props" 
    class="my-fancy-item">
    {{ props.text }}
  </li>
</my-awesome-list>

vue用到其他自定义组件要在components属性中定义，从代码可读性方面，让父组件知道引用了哪些子组件

要用到父组件传给子组件的数据，在子组件中定义一个局部变量然后用props初始化，主要是为了子组件改父组件传进来的值。props有以下几种写法

1
2
3
4
5
6
7
8
9
10

props: ['value']
props: {
    value: 'String'
}
props: {
    value: {
        type: 'String',
        default: 'hello world'
    }
}

组件调用

三种调用方式

• js代码，将组件封装成一个方法直接调用
• Vue指令，通过Vue注册插件的形式
• 通过内嵌组件的显示隐藏

组件传值

组件属性接受横杠式写法，但是组件内部接受到的变量需要转成驼峰写法

子组件需要父组件异步数据初始化组件的时候，先传进来，然后赋值给对应的值，并且watch值，防止异步数据返回得很慢，并且当数据更新的时候，更新组件。这么做的原因是数据还没来，组件已经渲染成功。这种问题其实可以通过等到父组件数据到来时候再渲染子组件，Vue不建议直接通过new组件的形式(或者我不知道这种形式的写法)，通过内嵌组件的写法，我们需要通过v-if,v-for来控制组件的创建和销毁

组件封装方法总结

单页面的形式引入组件的三种方式

• 通过内嵌组件的方式，通过暴露在全局中或者import局部引入的组件内嵌在页面
• 通过封装一个组件然后注册一个方法，通过传参的形式调用这个组件(参考element-ui MessageBox的实现)
• 通过 new import进来的组件传入相应的参数来调用

进阶

自定义指令，自定义过滤器，写计算属性，混入选项，插件的写法，封装组件(slot, props, event)

什么时候要写插件？插件有一个install方法

• 添加全局方法或者属性，如: vue-custom-element
• 添加全局资源，指令/过滤器/过渡等，如 vue-touch
• 通过全局 mixin 方法添加一些组件选项，如: vue-router
• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router

可复用组件想不重复使用，使用v-if, v-for, :key

可复用路由想不重复使用，使用keep-alive的exclude属性，匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

ref绑定在普通元素上，拿到的是 dom，绑定在组件上，拿到的是组件的 实例，可以直接调用组件的方法和属性

坑

• 组件中状态控制变量过多，需要大量定义这种变量使得页面很冗余
• keep-alive的组件，生命周期只走一遍，可以使用activated钩子函数。所以如果vue-router传值，直接定义在data中的话，param的值将会被缓存，必须在activated钩子函数中取值赋值
• 数组通过arr[index] = newItem赋值将不会更新，通过变异方法或者this.$set来实现
• …

vue-router遇到的问题

vue-router传值

对于路由路径没有定义为‘xx/:id’的路由，编程式导航，push一个params的时候，params刷新后将拿不到，如果定义为’xx/:id’的形式，则在路由组件中可以直接拿到params的值，要想刷新后拿到参数，push 的时候用query传值，但对于keep-alive组件，必须在activated钩子函数中获取param的值，如果直接写在data中，值将会被缓存

vue-router获取值

1. this.$route.params.xx
2. this.$route.query.xx
3. 路由导航事件 beforeRouteUpdate（也是/:id的形式才有这个事件）
4. watch $route（也是/:id的形式才能watch到）
5. vuex（刷新后存不住数据）
6. sessionStorage,localStorage
7. cookie

vue-router导航守卫

1. 路由独享route中可以配置beforeEnter,有三个参数，可以在当前路由中设置在进入前的一些操作
2. router全局方法.beforeEach, afterEach，全局路由守卫，在进入每一个路由的时候都会判读
3. 组件内导航钩子，beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
4. 其他导航守卫https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
   beforeRouteUpdate只是在可复用组件之间跳转的时候才会触发，比如/foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

vue-router动态传入路由

通过this.$router.addRoutes来添加，参数为数组，和配置中的route一样，但是有一个大bug是刷新后，路由配置又回到初始路由了，所以需要在页面入口(App.vue)处再增加路由的添加。

vue-router其他

命名视图是指平铺多个视图，而不是嵌套

结合element-ui需要考虑的业务交互问题

• 输入框：autoComplete（模糊匹配），remote search(常用)
• 下拉框：过滤，可清除，下拉加载更多，远程加载数据
• 日期选择：开始时间和结束时间的相互关联。组件中监听事件不能缩写，用v-on
• 文案：文案需要在前期考虑清楚
• loading
  • 涉及要异步加载的button要加loading,element-ui中通过v-bind:loading
  • 在异步数据回来之前table要加loading,指令为v-loading。如果路由的全局导航守卫中有设置全局的loading，则对于keep-alive状态下的组件，在activated生命周期下需要设置为false
• element-ui中的Pagination如果不传page_size，有默认值，为10
• …

函数传参以及获取后端返回的值需要考虑的问题

• 输入数据的地方考虑数据格式
• 拿到数据的时候，比如函数入参，是需要判断值否有效。用数据适配器处理
• 给后端传参的时候，组件中用到的数据和最后要传的值可以不同，因为组件一般的值有封装好的格式，最后传值可能不是这种格式，需要一个数据适配器来处理一下。

单线程、无阻塞性能相当好，但是一个CPU中的一个进程还是没法应对更多的负载。不管你使用多么强大的服务器，单线程总是有限度的。

Node.js 流是出了名的难用，难理解。近几年，工程师创造了大量与流有关的包，目的是想让我们更简单的使用流。但是这篇文章中，将关注于原生的Node.js流API。

理解Node.js其中最重要的概念之一是处理多连接和用户回调的并发模型(concurrency model)。这也是作为Node.js天生非阻塞的特性。

Node处理异步调用原始的方法叫做回调函数(callbacks)。

讲解如何构造TCP、UDP包来通信

HTTP是Node里的一等公民。实际上，node以web服务器起步，并且在很多的框架中大放光彩。

…（此处应有乌鸦飞过）运算符

当我和别人聊天的时候，别人说了一句让我很无语的话的时候，我会输入…，或者double…，es6新特性中，三个点竟成了运算符，我们来看看到底es6委员会辛辛苦苦到底做了什么，会不会让我们让我们无语的输入…

可执行代码段分为全局代码，函数代码，eval代码，在执行这些代码之前都会经历创建执行上下文的过程。

结构型设计模式之适配器模式