vue学习

• 文本 数据绑定的常见形式：双大括号。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：<span v-once>这个将不会改变: {{ msg }}</span>
• v-bind: 与v-on:的缩写方法，计算属性和方法，与缓存的关系 computed/ methods，另外计算属性的使用，可以像使用data中数据一样直接写属性名，我可以认为是像data一样将这个属性绑定在了vm对象上，如同使用getter方法。加括号我可以认为是调用了这个函数，最后值确实一样，但是一个属性可以使用这两个方法不会有什么问题么？很奇怪。怪就怪在computed计算属性的函数既可以用加()的方式调用，也可以把这个函数当作属性的getter方法，也就成了访问器属性来使用，结果这到底是个访问器属性呢，还是一个方法呢？
  后面能看出应该是一个访问器属性，因为不仅可以定义get,也可以定义set，那么问题来了，既然如此，为何属性可以如此调用，按常理确实作为一个方法来讲可以这样调用，但是现在又可以判定是访问器属性了，或者访问器属性可以这么使用？测试一下

var ex={};
Object.defineProperties(ex,{
      name:{value:"wang"},
      mes:{get: function(){return this.name+"qqq"}}
    })
console.log(ex.mes);//wangqqq
console.log(ex.mes());
var ex1={
    name:"wang",
    get mes(){return this.name+"qqq"}
}
console.log(ex1.mes);//wangqqq
console.log(ex1.mes());//无论是object方法还是字面量来定义，以方法调用都报错了，原因是不是一个函数。
证明在js是不可以的，方法就是方法，属性就是属性，vue应该进行过封装，可能是因为调用方法的时候调用的是里一个对象的方法，当作属性的时候是vm的属性，只是这两个对象因为某种原因绑定在了一起，就如同data一样。

注意

其实使用methods方法也可以达到和计算属性相同的效果，方法可以实时响应data中数据的改变，一旦data数据变化，而方法中有跟这个数据变化相关的值，整个methods都会调用以便响应这个变化，这就会导致浪费性能，因为有时并不是所有的数据都发生了变化，仅仅变化了一个数据而已。
计算属性就相当于get set。
上面的问题得到了解决，计算属性并不能使用()的方式，使用()是methods调用的，只是他们两者的代码并没有变，两者区别在于缓存，计算属性是基于依赖进行缓存，只有在相关依赖发生改变才会求值，也就是说只有依赖值没有发生改变，访问计算属性返回的是之前的结果，不会再执行函数，也就是说如果不是响应式依赖那么计算属性的值就不会再更新，相比之下，每当出发重新渲染，调用方法总会再次执行函数，并且methods中的方法都会被调用，也就是时候没有缓存。

• watch监听，以及ajax_debounce异步交互 此工具得记下

• 替换数组，vue实现了一些智能的方法，并不会丢弃现有的dom元素重新渲染，而是最大范围的重用。另外回顾一下match在不同参数时的用法。

• vue不能检测到直接通过数组索引变动的数组，或者直接通过length修改长度的数组。
  第一个问题可以使用Vue.set(example1.items,indexOfitem,newValue) 或example1.items.splice(indexofItem,1,newValue)第二类问题使用example.items.splice(newLength)(这是什么用法？)

• 同样由于js的限制，Vue不能检测对象属性的添加或删除，也可以使用Vue.set(vm.useProfile,'age',27),把属性添加到嵌套的useProfile对象中，因为直接使用vm.b=2；这个属性不是响应式属性。
  或者使用vm.$set(vm.userProfile,'age',27),它是全局Vue.set的别名。

• 为已有对象添加多个属性，使用Object,assign()方法，但是要想要添加的是新的响应式属性的话，不要直接往对象上添加，而应该把原来对象和添加对象往空对象上添加，最后返回。

• 内联语句处理器中访问原始得DOM事件，可以在调用得函数中用特殊变量$event传入。

• 事件处理程序中尽量只有数据逻辑，DOM细节交给事件修饰符，5个事件修饰符
  .stop .prevent .capture .self .once注意修饰符可以串联，self表示event,target是当前元素自身时触发处理函数，也就是说事件不是内部元素发出。.once即事件只会吃法一次。其他只能对DOM事件起作用，once可以用到自定义组件事件。--使用修饰符得顺序也很重要！！！

• .passive修饰符，事件得默认行为会立即触发，（包含了event.preventDefault()的情况，会忽略.prevent。这个修饰符本身意味着告诉浏览器不想阻止事件的默认行为）并不会等待事件处理函数执行完毕，此修饰符尤其能够提升移动端得性能。

• 按键修饰符， v-on:keyup.13="submit"，Vue为常用的按键提供了别名，

.enter
.tab
.delete(捕获“删除”和退格键)
.esc
.space
.up
.down
.left
.right
另外可以使用全局config.keyCodes对象自定义按键修饰符别名：
Vue.config.keyCodes.f1=112//可以使用v-on:keyup.f1
新增：暴露的有效案件名转换为kebab-case作为修饰符。

如下修饰符实现按下相应按键才触发鼠标或键盘事件的监听器
.ctrl .alt .shift .meta如

<input @keyup.alt.67="clear"> alt+c
<div @click.ctrl="doSomething">do something</div>  ctrl+click

.exact 允许控制由精确的系统修饰符组合触发的事件

<button @click.ctrl="onClick">A</button>按下ctrl，即使alt,shift被一同按下也会触发事件
<button @click.ctrl.exact="onCtrlOnclick">A</button>,当且仅当ctrl按下时才会触发
<button @click.exact="onClick">A</button>没有任何系统修饰符按下时才会生效
另外新增鼠标按钮修饰符
.left .right .middle

组件

• 自定义标签命名最好遵循w3c标准，使用小写包含一个短杠，语法Vue.component(tagname,options),另外确保在初始化根实例之前注册组件 //全局注册
• 可以通过某个Vue实例/组件的实例选项components注册仅在其作用域中可用的组件,这样注册的组件只能在父组件模板中可用