vue2.x的学习

[renmm]

watch的使用

监听数据变化时使用，一般用于当数据变化，需要执行联动时操作。

1. 监听属性作为函数使用，监听某个数据，数据名称作为key： 这种使用方式，在第一次绑定时，不会立即触发。只有等到监听属性变化时，才会触发。

   watch: {
   // 如果 `question` 发生改变，这个函数就会运行
   question: function (newQuestion, oldQuestion) {
     this.answer = 'Waiting for you to stop typing...'
     this.debouncedGetAnswer()
   }
   },

2. 监听属性作为对象使用，有handler函数和2个参数immediate和deep属性可使用

   • immediate:true 表示立即执行

3. deep属性 当需要监听某个data的嵌套属性时，这个字段就派上作用了。

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
} 

不过，这样写，可能会有性能影响，如果obj对象嵌套多，会造成一定的内存开销，可以用字符串形式监听。

优化完：

watch: {
 'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
  }
} 

参考

• 计算属性和侦听器
• Vue.js中 watch 的高级用法

[renmm]

vue中组件的通讯方式

1. props/$emit方式
   • props: 父组件向子组件传递数据
   • this.$emit('fn', data) : 子组件向父组件传递数据

     //todo

参考

• Vue 组件间通信六种方式（完整版）

[renmm]

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

Getter

与vue里的computed同样的概念，可以理解为state的计算属性，都是派生出新的数据。

使用

state.getter.xx

mapGetters辅助函数

参考

• Getter

[renmm]

v-model

我的理解是一个语法糖，把value与onChange封装了(input,textarea是value,onInput，其他的参考vue官网)

值绑定 (v-bind:value="obj1")

默认value是字符串，单选框，复选框也可以是boolean值。如果需要调整value，使用指令: v-bind:value="a"

修饰符

• .lazy: 在“change”时而非“input”时更新
• .number: 将用户的输入值转为数值类型
• .trim: 过滤用户输入的首尾空白字符

参考

• 表单输入绑定

[renmm]

vue的便利，好用

• $event 特殊变量，模板里，表示事件对象

随处可见的$xx属性或者全局对象。表示当前实例的属性或者当前命名空间下的变量(我自己猜的，不一定准)

1. v-on:change="$emit('change', $event.target.checked)"里的$emit和$event.target.checked
2. this.$emit('myEvent')

   
   Vue.component('base-checkbox', {
   model: {
   prop: 'checked',
   event: 'change'
   },
   props: {
   checked: Boolean
   },
   template: `
   <input
     type="checkbox"
     v-bind:checked="checked"
     v-on:change="$emit('change', $event.target.checked)"
   >
   `
   })

$listeners

它是一个对象，里面包含了作用在这个组件上的所有监听器

## 参考
- [自定义事件](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)

[renmm]

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。传送门

v-bind

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on

v-on指令监听 DOM 事件 传送口

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

[renmm]

vue里template嵌套有什么作用

主要是渲染完，不会产生元素。主要使用场景是与v-if,v-for一起使用。有的味道

[链接]

• vue中两个template标签嵌套有什么作用吗？