vue2.0新增和废除

新增:

  全局配置

  Vue.config.errorHandler:它是一个全局钩子函数。当组件渲染时遇到未处理的异常,会调用这个函数,默认会输出错误堆栈信息

  Vue.config.keyCodes:它提供了对v-on指令按键修饰符自定义key别名的配置

  全局API

  Vue.compile:它的功能是把一个Vue实例的模板字符串编译成render function

  VM选项

  render:是一个function,运行时会把模板中的内容经过Vue的编译,转换成渲染方法存入render字段,然后再执行。如果发现render字段已经存在,则跳过模板解析过程直接渲染。因此,在vue2中写一个模板和写一个render function是等价的

  delimiters:是文本插值的界定符,它是一个全局的配置选项。在vuejs2中,它作为vue实例的一个属性,只独立作用于当前vue实例的编译过程

  functional:可以创建一个functional的component来替代它,仅仅通过一个render function来创建virtual DOM

  生命期钩子函数

  beforeMount:它是调用时机是在模板编译成render方法之后,创建watcher之前

  mounted:它的调用时机是在DOM输生成之后

  beforUpdate:它的调用时机是在Virtual DOM生成之后,DOM树生成之前,调用条件是这个vm实例已经mounted过

  update:它的调用时机是在DOM树生成之后,调用条件是这个vm实例已经mounted过

  activated:它的调用时机是在DOM树生成之后,调用条件是keep-alive组件。

  deactivated:它的调用时机是在vue实例销毁时,调用条件是keep-alive组件

  指令:

  v-once:给DOM元素设置v-once指令,来表明该元素是一个静态根节点,这些节点生成后内容就不会被改变,因此在Virtual DOM的diff和patch的过程中,可以忽略这些节点来提升性能

  服务端渲染:

  renderToString(component,done)方法:是在服务端把vue组件component渲染成DOM字符串,我们可以在done的回调函数中拿到渲染好的DOM字符串

  renderToStream(component)方法:是返回一个渲染流,是一个可读的stream,可以直接pipe到HTTP Response中。该方法相对于renderToString,当App非常复杂时也不会阻塞服务器的event loop,能够确保服务端的响应度,也能让用户更快地获得渲染内容

  

废除:

  全局配置

  Vue.config.debug:如果设置成true,则在开发版本中为所有的警告打印栈追踪信息。被errorHandler代替。

  Vue.config.async:表示异步模式,默认值为true,如果关闭异步模式,Vue检测到数据变化时会同步更新DOM。这样虽然方便了调试,但会导致性能下降,并影响Watcher的回调顺序,在生产环境下是不建议使用的。被Virtual DOM的方式代替,它的渲染方式必须是异步的。

  Vue.config.unsafeDelimeters:代表原生HTML插值的界定符。Vue.js2.0废弃了该配置,用v-html指令替代该功能。

  全局API

  Vue.transition的stagger:vue1中当transition和v-for一起使用时可以通过stagger创建渐进过度效果。2中废弃,可以在遍历时给每个元素设置data-index属性,然后通过在JavaScript中访问该属性实现类似的效果

  Vue.elementDirective:vue1中是定义全局元素指令,元素指令的本意是像Angularjs的E指令那样定义一个自定义元素,它可以被看成一个轻量组件。但是,这是一个鸡肋功能,vue本身就有一套很好的组件化开发机制。所以废除,2中可以通过component来实现。

  Vue.partial:是注册或获取全局的partial。partial是一种特殊元素,它可动态地插入一小段模板,在插入时被Vue编译。但由于它的功能完全可以通过functional的component实现,所以废除

  VM选项

  props.coorce:是属性转换函数,它的功能是把传入的属性值通过一个函数进行转换。不过它的功能也可以通过设置计算属性来实现

  prop binding modes:vue1中我们可以使用.sync,.once绑定修饰符设置属性的半丁模式为双向或单次绑定。vue2中废除了这些模式,属性只能够单向传递,如果子组件想影响父组件,则必须通过事件派发的方法,这样做的好处是降低子组件和父组件的耦合。在Vue2中,我们应该把prop看作是immutable(不可变)的,不建议直接修改prop,所有需要修改prop的场景都可以用基于该prop的data属性或者computed属性替代

  replace:属性来决定是否用模板替换挂载元素,默认值是true,模板将覆盖挂载元素;vue2废除了该属性并规定组件必须有确切的根元素,模板将挂载到这个根元素上并覆盖。因此,vue2中不能把vue实例挂载在document.body上。

  partials:是一个包含模板字符串的对象。它的功能可以通过components对象实现,因此废除

  elementDirective:是一个包含元素指令的对象。它的功能可以通过functional的components实现,因此废除。

  events:在组件的自定义事件监听都是通过这个属性设置的。在vue2中,组件的事件派发和广播被废弃,因此考虑到组件树可能层级很深,兄弟组件的通信问题。我们可以通过全局事件管理中心来解决这些问题

  ready:调用时机是第一次插入DOM后。vue2并不一定执行在浏览器环境中,也可能是在服务端渲染,因此废除用mounted钩子函数替代。

  beforeCompile:钩子函数的调用时机是在模板编译前。2中废除用created钩子函数替代

  compiled:调用时机是在编译模板之后,dom创建之前。2中废除用mounted钩子函数替代

  attached:钩子函数的调用时机是插入dom时,2中不一定创建dom所以废除

  detached:调用时机是移除dom时。2中不一定创建dom所以废除

  实例属性

  vm.$els:表示一个注册有v-el DOM元素的对象,可以通过它访问到组件中的DOM对象。vue2废除合并到vm.$refs中。

  实例方法

  vm.$get:是从Vue实例获取指定的表达式的值。vue2废弃,建议直接从JavaScript对象中取值

  vm.$set:是设置Vue实例的属性值。vue2废弃,可以用全局API Vue.set替代

  vm.$delet:是删除Vue实例(以及$data)上的顶级属性。vue2中废弃,可用全局API Vue.delete替代

  vm.$eval:是计算当前实例上的合法绑定表达式,可包含过滤器,可通过computed属性实现。vue2中废弃

  vm.$interpolate:是计算模板,该功能也可以使用computed属性实现,实际上很少使用。vue2中废弃

  vm.$log:是打印当前实例数据。vue2中废除被vue提供的开发者工具替代

  vm.$dispatch:是组件派发事件的方法,它会沿着父链向上冒泡在触发第一个监听器后停止,除非返回true。vue2中废除,用全局事件或vuex替代

  vm.$broadcaset:是组件广播事件的方法,它会向所有子组件广播,每条路径上的通知在触发一个监听器后停止,除非返回true。vue2中废除,用全局事件或vuex替代

  vm.$appendTo:是将实例的DOM片段插入目标元素内。vue2废弃了该方法。可通过原生DOM.API:appendChild方法配合vm.$el实现

  vm.$before:是将实例的DOM片段插入目标元素的前面。vue2中废除了该方法。可通过原生insertBefore方法配合vm.$el实现

  vm.$after:是将实例的DOM片段插入目标元素的后面。vue2中废除,可通过afterChild和appendChild配合vm.$el实现

  vm.$remove:是从DOM中删除实例的DOM元素或片段。vue2中废除,可通过remove方法配合vm.$el实现

  指令:

  v-model中的debounce 参数:是针对input事件设置一个最小延时,在每次敲击之后延迟同步输入框的值与数据。debounce参数并不会延迟input事件,它是延迟写入底层数据,因此在使用debounce时应当用vm.$watch()响应数据变化。由于延迟写入底层数据,它的状态更新也会被延迟,这样就会带来一些限制,比如不能实时监测到数据的输入。vue2废弃,把延迟操作和vue本身解耦,可以通过v-on:input绑定input事件,并配合第三方的debounce方法,这样既可以实时更新状态,也可以达到延迟input事件的目的

  v-ref:是父组件上注册一个子组件的索引,便于直接访问。vue2废弃。它的功能用特殊的属性ref替代

  v-el:是为DOM元素注册一个索引,方便通过所属实例的$els访问这个元素。vue2废弃。它的功能合并到ref属性中

  特殊元素:

  partial:是动态插入一个模板。vue2废弃,它的功能可以通过functional的component实现

改变级别:

  Vue.config.delimeters:代表文本插值的界定符,是一个全局配置。而在Vue.js2.0中,该配置从全局配置中移除,变成一个组件级别的配置。

  

原文地址:https://www.cnblogs.com/cxdxm/p/6760188.html