Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "what are the changes in Vue 2.0". In the operation of practical cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Changes at the senior level

The template parser is no longer dependent on DOM (unless you use a real DOM as a template), so as long as you use a string template, you will no longer be subject to any parsing restrictions in version 1.0. However, if you rely on mounting an element as a template in existing content (using el elements), you will still be subject to these restrictions.

The compiler (part of converting a string template to a rendering method) and run time can now be separated. There are two different builds:

Stand-alone build: includes compiling and running. This approach is almost exactly the same as that of vue 1.0.

Run-time compilation: since it does not include a compiler, you can either precompile the template or manually write the rendering function during the compilation step. The npm package exports this version by default, so you need to have a compilation process (using Browserify or Webpack), from which vueify or vue-loader will be able to precompile templates.

Global configuration

Vue.config.silent

Vue.config.optionMergeStrategies

Vue.config.devtools

Vue.config.errorHandler (new API, global hooks for handling uncaptured errors during component rendering and monitoring)

Vue.config.keyCodes (new API, alias for configuring custom key for v-on)

Vue.config.debug (discarded)

Vue.config.async (discarded)

Vue.config.delimiters (discarded)

Vue.config.unsafeDelimiters (discarded, using v-html)

Global API

Vue.extend

Vue.nextTick

Vue.set

Vue.delete

Vue.directive

Vue.component

Vue.use

Vue.mixin

Vue.compile (new API, can only be used for stand-alone builds)

Vue.transition

Stagger (discarded, set on el

Vue.filter

Vue.elementDirective (discarded, using components)

Vue.partial (discarded, using functional components)

Option

Data

Data

Props

. Prop

. Default

. Coerce (discarded, if you need to convert prop, please use the compute attribute)

. Prop binding modes (discarded, v-model works on components

PropsData (new API) can only be used for instances

Computed

Methods

Watch

DOM

El

Template

Render (new API)

Replace (discarded, component must now have a root element)

Life cycle hook

Init (discarded, please use beforeCreate)

Created

BeforeDestroy

Destroyed

BeforeMount (new API)

Mounted (new API)

BeforeUpdate (new API)

Updated (new API)

Activated (new API for keep-alive)

Deactivated (new API for keep-alive)

Ready (discarded, using mounted)

Activate (discarded, migrated to vue-router)

BeforeCompile (discarded, using created)

Compiled (discarded, using mounted)

Attached (discarded)

Detached (discarded, ibid.)

Assets

Directives

Components

Transitions

Filters

Partials (discarded)

ElementDirectives (discarded)

Miscellaneous

Parent

Mixins

Name

Extends

Delimiters (new API, replacing the original global configuration option, available only in stand-alone builds)

Functional (new API)

Events (discarded)

Example method

Data

Vm.$watch

Vm.$get (discarded, directly retrieved value)

Vm.$set (discarded, using Vue.set)

Vm.$delete (discarded, using Vue.delete)

Vm.$eval (discarded, no real use)

Vm.$interpolate (discarded, ibid.)

Vm.$log (discarded, using devtools)

Events

Vm.$on

Vm.$once

Vm.$off

Vm.$emit

Vm.$dispatch (discarded, using global events or using vuex, see below)

Vm.$broadcast (discarded, ibid.)

DOM

Vm.$nextTick

Vm.$appendTo (discarded, using local API on vm.$el)

Vm.$before (discarded)

Vm.$after (discarded)

Vm.$remove (discarded)

Life cycle

Vm.$mount

Vm.$destroy

Instruction

V-text

V-html (note that {{} is discarded)

V-if

V-show

V-else

V-for

. Key (instead of track-by)

. Object v-for

. Range v-for

. Parameters are updated sequentially: (value, index) in arr is used in arrays, and (value, key, index) in obj is used in objects.

. $index and $key are discarded

V-on

. Modifiers

. On child component

. Custom key code, the current version of Vue.config.keyCodes replaces the original Vue.directive ('on'). KeyCodes

V-bind

. As prop

. Xlink

. Bind object

V-bind:style

Prefix sniffing

V-bind:class

V-model

Lazy (as modifier)

Number (as modifier)

Ignoring composition events

Debounce (discarded, using v-on:input)

V-cloak

V-pre

V-once (new API)

V-ref (discarded, now just a special property ref)

V-el (merged with ref)

Special component

: is

Async component

Inline-template

Partial (discarded)

Special attribute

Key

Ref

Slot

Server-side rendering

RenderToString

RenderToStream

Client-side hydration

This is the end of the content of "what's changed in Vue 2.0". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.