preface

I’ve been using VUE for a while now, and I’ve accumulated a lot of confusion while working on it. Of course, I’ve also accumulated some valuable experience. When I was wandering in the forum and some comment sections, I also had some thoughts on the questions and suggestions put forward by many big men. So they want to start to write, write something useful seriously.

PS: If you don’t know or forget the basics of computed and watch, check the official documentation.

Cn.vuejs.org/v2/guide/co…

Talk about computed and Watch

When I first learned Vue, I was immersed in the other features of Vue and did not seriously consider these two attributes. Until the project… began to confuse the silly to turn over the document hurriedly. Now thinking of a good summary in the blog, I hope people can see and can help you a little 🙂

1, the computed

Why is there computed in the first place? What does it solve?

As four years of undergraduate students in the development of adr, the common View and Class (business logic) “separation”, first within the template expressions call delicious at the same time also with a hint of confusion, now that the View layer alone, but also provides some can write logic code space, so inevitably there will be fit in the following code in the template

<div id="example">
    {{ example.getMax() > 0 ? 1 : 2}}
</div>
Copy the code

, of course, this example is straightforward, but in the real project there may be more complex business logic is strong among them, imagine, if it is a complex DOM tree mixed with a large number of such complex, and related business logic expressions, the characteristics of the template will lose its simplicity, and makes a simple DOM tree become obscure and difficult to maintain. Thus, computed aims to solve and maintain logical expressions that might appear in templates. In Vue3, some of the logic can be written as follows

setup() {
    const test = computed(() = > example.value.getMax())
    / /... You can also do more logic
    return {
        test
    }
}
Copy the code

When the more complex logic in the template is removed, it makes our code much more understandable and maintainable!

For computed responsiveness

Of course, variables returned by computed wrapping are responsive, such as:

  const playlist = computed(() = > store.state.playList)
  console.log(playlist)
  // log: 
  //ComputedRefImpl {_dirty: true, __v_isRef: true, __v_isReadonly: true, _setter: ƒ, effect: ƒ}
Copy the code

Note this ComputedRefImpl, sometimes your data is “inexplically” unresponsive and you don’t know the truth, this is to check if it is XXRefImpl and determine if it is not. Therefore, the difference between computed in templates and normal function is that normal functions are used in templates and called every time the template is rendered, whereas computed, Vue is internally cached in a responsive manner and only executes when dependent variables change

2, watch

On its official website, UVU suggests that it is not advisable to abuse Watch to replace computed data. Of course, I personally believe that Watch is used in heavyweight business scenarios, as can be seen from the use of oldVal and newVal provided by UVU, and that Watch is more suitable for scenarios where new and old data change.

The simple use of watch will not be described here, here I also want to add a watch use knowledge —- when want to monitor the data is not responsive how to do? Simply listen for a method that returns that data

watch(() = > props.data, async () => {
  todoData()
  calculate()
})
Copy the code

Note that the props variables in setup are unresponsive, so we can pass in a function to fix that.

Two, their use in daily development

1. For example, if I take data from the Store and return it to the template, I use computed, and of course I can add some logic to the passed function…

const list = computed(() = > store.state.XXList)
Copy the code

2. Watch is generally used in heavyweight business scenarios, such as complex computing or data processing, and loading and accessing data

  const useXXXEffect = (store, XXXRef, progress) => {
  const xx = computed(() => store.state.xx)
  watch(xx, async (newxx) => {
    if (newxx) {
      await nextTick()
      XXXRef.value.setOffset(progress.value)
    }
  })
  return {
    xx
  }
}
Copy the code

Write in the last

This is a partial personal note to the article, the author’s skill is relatively shallow, I hope that some simple notes can help people in need