[译]Vue 2.0的变化(一)之基本API变化

简介:


高层级的变化

  • 模板解析器不再依赖于DOM(除非你使用真正的DOM作为模板),因此只要你使用字符串模板,你将不再受到任何1.0版本中的解析限制。但是,如果你依赖在存在的内容中挂载一个元素作为模板(使用el元素),你将依然受到这些限制。
  • 编译器(将字符串模板转换为渲染方法的部分)和运行时间现在能够被分开。这里有两种不同的构建:
    • 独立构建:包括编译并且运行。这种方式和vue 1.0几乎完全一样。
    • 运行时编译:由于它不包括编译器,在编译步骤时要么预编译模板,要么手动编写渲染功能。npm包默认导出这个版本,那么你需要有一个编译的过程(使用Browserify或Webpack ),从中vueify或vue-loader将可以进行模板预编译。

全局配置

  • Vue.config.silent
  • Vue.config.optionMergeStrategies
  • Vue.config.devtools
  • Vue.config.errorHandler(新API,全局的挂钩用于在组件渲染和监控的时候处理未捕获的错误)
  • Vue.config.keyCodes(新API,为v-on配置自定义的key的别名)
  • Vue.config.debug(已丢弃)
  • Vue.config.async(已丢弃)
  • Vue.config.delimiters(已丢弃)
  • Vue.config.unsafeDelimiters(已丢弃,使用v-html)

全局API

  • Vue.extend
  • Vue.nextTick
  • Vue.set
  • Vue.delete
  • Vue.directive
  • Vue.component
  • Vue.use
  • Vue.mixin
  • Vue.compile(新API,只能用于独立版本构建)
  • Vue.transition
  • stagger(已丢弃,在el上设置
  • Vue.filter
  • Vue.elementDirective(已丢弃,使用组件)
  • Vue.partial (已丢弃,使用功能组件)

选项

data

  • data
  • props

。prop

。default

。coerce(已丢弃,如果你需要转换prop,请使用compute属性)

。prop binding modes(已丢弃,v-model在组件上可以工作

  • propsData(新API)只能用于实例
  • computed
  • methods
  • watch

DOM

  • el
  • template
  • render(新API)
  • replace(已丢弃,组件现在必须有一个根元素)

生命周期钩子

  • init(已丢弃,请使用beforeCreate)
  • created
  • beforeDestroy
  • destroyed
  • beforeMount(新API)
  • mounted(新API)
  • beforeUpdate(新API)
  • updated(新API)
  • activated(新API,用于keep-alive)
  • deactivated(新API用于keep-alive)
  • ready(已丢弃,使用mounted)
  • activate(已丢弃,迁移到vue-router)
  • beforeCompile(已丢弃,使用created)
  • compiled(已丢弃,使用mounted)
  • attached(已丢弃)
  • detached(已丢弃,同上)

Assets

  • directives
  • components
  • transitions
  • filters
  • partials(已丢弃)
  • elementDirectives(已丢弃)

杂项

  • parent
  • mixins
  • name
  • extends
  • delimiters(新API,替代原版的全局配置选项,只在独立构建中可用)
  • functional(新API)
  • events(已丢弃)

实例方法

data

  • vm.$watch
  • vm.$get(已丢弃,直接检索值)
  • vm.$set(已丢弃,使用Vue.set)
  • vm.$delete(已丢弃,使用Vue.delete)
  • vm.$eval(已丢弃,没有真正的使用)
  • vm.$interpolate(已丢弃,同上)
  • vm.$log(已丢弃,使用devtools)

events

  • vm.$on
  • vm.$once
  • vm.$off
  • vm.$emit
  • vm.$dispatch(已丢弃,使用全局的事件或使用vuex,见下面)
  • vm.$broadcast(已丢弃,同上)

DOM

  • vm.$nextTick
  • vm.$appendTo(已丢弃,在 vm.$el上使用本地API)
  • vm.$before(已丢弃)
  • vm.$after(已丢弃)
  • vm.$remove(已丢弃)

生命周期

  • vm.$mount
  • vm.$destroy

指令

  • v-text
  • v-html(注意{{{ }}} 被丢弃)
  • v-if
  • v-show
  • v-else
  • v-for

。key (替代 track-by)

。object v-for

。range v-for

。参数顺序更新:数组中使用(value, index) in arr,对象中使用(value, key, index) in obj

。$index和$key被丢弃

  • v-on

。modifiers

。on child component

。自定义键码,目前版本Vue.config.keyCodes代替原来的Vue.directive('on').keyCodes

  • v-bind

。作为prop

。xlink

。绑定对象

  • v-bind:style
    • prefix sniffing
  • v-bind:class
  • v-model
    • lazy (as modifier)
    • number (as modifier)
    • ignoring composition events
    • debounce(已丢弃,使用v-on:input)
  • v-cloak
  • v-pre
  • v-once(新API)
  • v-ref(已丢弃,现在只是一个特殊的属性ref)
  • v-el(和ref合并)

特殊组件

  • <component>
    • :is
    • async组件
    • inline-template
  • <transition>
  • <transition-group>
  • <keep-alive>
  • <slot>
  • partial(已丢弃)

特殊属性

  • key
  • ref
  • slot

服务器端渲染

  • renderToString
  • renderToStream
  • client-side hydration
作者:白小爱
来源:51CTO
相关文章
|
1月前
|
JavaScript 前端开发 API
深入浅出:Vue 3 Composition API 的魅力与实践
【2月更文挑战第13天】 本文将探索 Vue 3 的核心特性之一——Composition API。通过对比 Options API,本文旨在揭示 Composition API 如何提高代码的组织性和可复用性,并通过实际案例展示其在现代前端开发中的应用。不同于传统的技术文章摘要,我们将通过一个具体的开发场景,引领读者步入 Composition API 的世界,展现它如何优雅地解决复杂组件逻辑的管理问题,从而激发读者探索和运用 Vue 3 新特性的热情。
19 1
|
2月前
|
JavaScript API
vue选项式API和组合式Api
vue选项式API和组合式Api
|
3月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
37 3
|
1月前
|
JavaScript 前端开发 API
深入浅出:Vue 3 Composition API 的魅力
【2月更文挑战第13天】 在前端开发的世界里,Vue.js 一直占据着重要的地位。随着 Vue 3 的推出,Composition API 成为了开发者热议的焦点。本文将从一个独特的视角探讨 Composition API 的核心优势,通过对比 Options API,解析其如何优化代码组织和提升项目的可维护性。我们将通过实际案例,深入理解 Composition API 的使用方法和最佳实践,帮助开发者更好地把握这一新工具,激发前端开发的无限可能。
|
1月前
|
JavaScript API
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
29 0
|
1月前
|
JavaScript 前端开发 API
深入浅出Vue 3 Composition API:重塑前端开发范式
【2月更文挑战第12天】 本文旨在深入探讨Vue 3中的Composition API,一种全新的组件和逻辑复用方式。相较于传统的Options API,Composition API提供了更为灵活和高效的代码组织机制。通过实例和对比分析,我们将揭示其如何优化代码结构,提升项目的可维护性和扩展性。文章不仅为初学者铺平进入Vue 3世界的道路,也为有经验的开发者提供了深度思考的视角,探索前端开发的新范式。
29 2
|
1月前
|
JavaScript 前端开发 API
深入浅出:Vue 3 Composition API 的革新之旅
【2月更文挑战第11天】本文将带你深入探索 Vue 3 中的 Composition API,一项革命性的特性,旨在提高代码的组织性和可复用性。我们将通过实际案例,对比传统的 Options API,深入理解 Composition API 如何优化组件逻辑的组织和重用,从而让前端开发变得更加高效和灵活。文章不仅仅是技术指南,更是对前端开发模式思考的一次探索之旅。
|
2月前
|
JavaScript API
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
16 0
|
2月前
|
JavaScript 安全 API
深入理解Vue 3中的Composition API
深入理解Vue 3中的Composition API
41 3
|
3月前
|
存储 JavaScript 前端开发
Vue 3 Composition API:让组件开发更高效、灵活(下)
Vue 3 Composition API:让组件开发更高效、灵活(下)
Vue 3 Composition API:让组件开发更高效、灵活(下)

热门文章

最新文章