Your location:Tech News>News>Script>15 minutes master vue-next functional API (Summary)

Latest News

15 minutes master vue-next functional API (Summary)




  Before SHARE vue-next of each sub-module, there I feel the need more comprehensive finishing under functional api vue-next proposed, to understand these words, whether it is for a source read, or when the start of the official release learning, there will be play a supporting role.

  Something like that there are many online, but will be more fragmented, while some are also relatively out of date, of course, the current consolidation of these are also likely to be out of date, after all, the code is still in the stage of pre-alpha, but where the design philosophy should not change the.

  Past Articles

  15 minutes to master vue-next-responsive principles

  vue-next / runtime-core source code reading guide


  setup will be written as the main battlefield of business logic components, various types of hook methods are required to call in the setup of this scope, RFC example of direct view:



  Its code structure looks vue2 remained the same, but the following points should be noted:

  The timing of call setup itself, the source code from the current point of view, between beforeCreate and created two life-cycle, the implication is that you can not use the current component instance this point here

  Stating that the state, we use reactive this api to construct, stating that the computed state, the use of computed, both are essentially Proxy Objects

  Stating that the component method, we can directly declare a statement by way of an ordinary function for changing the state, the direct use of reactive Proxy objects can be returned by the closure

  setup return value is called render context, by definition, the template can access the context object data and various methods, I have mentioned in the previous article, the template data is parsed, priority will be given from the data subject value, then this is a render context

  In addition to returning render context, template rendering function may also return, Yes, that h (.), This form corresponds to the situation when we do not declare template properties

  In vue-next, we import directly from vue reactive, computed and other api can, if on vue2 version, we can also use this by using the composition-api plugin api these.


  Disclaimer state mainly in the following form.

  Underlying type

  Underlying type can be declared by the ref api, as follows:

  import {ref} from "vue";

  export default {

  setup () {

  const count = ref (0);

  function inc () {

  count.value ++;


  return {count, inc};



  By reason for ref, because the basis of the type of traditional values js not pass a reference value, the internal vue-next package as it will automatically a ref object whose value is pointing to the original value.Of course, ref pointing to a reference type is not the problem, its value point of reference type variable references.

  Reference types

  In addition to using a reference type ref to declare, also can be used as reactive, as follows:

  import {reactive} from "vue";

  export default {

  setup () {

  const state=reactive({

  count: 0


  function inc () {

  state.count ++;


  return {state, inc};

  // method or by toRefs

  // return { .toRefs (state), inc};



  The reason for using toRefs here mainly because, if the object is generated reactive, because we just want to save a reference to the Proxy object, we can not use to deconstruct it flat, and toRefs will each property within the package as a ref objects.


  For prop statement and can use the following code:

  export default {

  props: {

  count: Number


  setup (props) {

  watch (() => {

  console.log (\ `count is: \` + props.count)




  Here you can find that way and vue2 declared essentially the same, but it is worth noting that in vue-next in, props type declaration is not required, if you use typescript, full version can be rewritten as follows:

  interface PropTypesI {

  count: number


  export default {

  setup (props: PropTypesI) {

  watch (() => {

  console.log (\ `count is: \` + props.count)




  In addition, you can directly observe the changes in a prop by watch method, which is why?The answer is very simple, that props itself in the source code, is a being reactive objects after the package, so it has a responsive, so the callback function in the watch method will automatically collect rely, after when the count changes, it will automatically call these callbacks logic.


  In the setup of that section, we know that, when you call setup, component instance has not been created, that means we can not use this to access the current instance, then I want to visit some of the built-in properties in vue2 through this, how do?Or emit such attrs.We can setup the second argument:

  setup (props, context) {

  do anything.


  This context object is also a Proxy object, when we pass context.When attrs access its properties, essentially a proxy object instance will access point to the internal components (i.e. between componentInternalInstance mentioned articles).

  Life cycle

  Each of the component lifecycle vue2 function, corresponds to a current lifecycle Hook, for example:

  import {onMounted, onUpdated, onUnmounted} from "vue";

  setup () {

  onMounted (() => { . });

  onUpdated (() => { . });

  onUnmounted (() => { . });


  A point worth noting here is that for beforeCreate and created life-cycle, although there are hook response, but I think there is no need to use separate, because most of these logic code are some of the initialization logic code written directly in the setup method that is can.

  How to code reuse

  On this basis, the code reuse is no longer as vue2 manner as in, or HOC by mixin to achieve reuse code, say a little here, the code reuse embodiment with a more significant disadvantages:

  Hidden sources of data, mainly in the mixin

  We will sacrifice some performance, mainly in the HOC

  You may encounter naming conflicts, mainly in the mixin

  In vue-next, the multiplexing logic on the nature of the code is to use the hook to split the business logic and state, if you are familiar react hooks, we should soon be able to understand the meaning of what I mean.If we write the logic in the setup process, the code will soon become difficult to maintain, in this regard, we may be coupled together some of the code pulled out at the same time to use the prefix name, declare a custom hook ,as follows:

  export default {

  setup() {

  const data = useSearch ()

  const {sortedData, sort} = useSorting (data)

  return {data, sortedData, sort}



  function useSearch () {

  .fetch data


  function useSort (data) {

  .sort data


  In addition to the inline declarations manner, the hook may also be customized in a separate declaration file, can be directly introduced through Import, such as:

  import useSearch from ''@ hooks / search''

  import useSort from ''@ hooks / sort''

  And react hooks contrast

  vue-next in this area draws react hooks design ideas, but in terms of the implementation layer, they are not the same, the following main points:

  vue-next independent of its calling sequence-dependent and react

  vue-next it provides a life-cycle approach, and react deliberately vague concept of life cycle

  vue-next-based systems implemented in response, meaning that its dependency declaration need not be displayed (and automatically), and react the array manually declared dependencies

  That''s all for this article, I want to be helpful to learn, I hope you will support script Home.

  You may also be interested in the article: vue2.nextTick source function callback method Vue after 0 $ nextTick monitor data has been rendered in the Detailed Analysis

Recommend article

Relate article