This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

For Vue3, it has been released for some time, and it has been explored and studied intermittently, but it is not systematic and there is no summary. Let me make a brief summary this weekend:

Earlier we had a first look at Vue3, the Vue3 life cycle and the setup() function. This article continues to learn about two features of Vue3. X:

Computed and watch are two popular knowledge points,

  • computedRepresents computed properties, usually used to process data, for easy writing in templates;
  • watchStands for monitor,

Vue3 repository & document address

Vue3 source repository: github.com/vuejs/vue-n…

The document address of Vue3 is v3.vuejs.org/

A quick exercise with Vue3: Vue3 + TypeScript: github.com/xn213/zhihu…

Computed properties

We use double curly braces {{}} when we use data in a template. Sometimes the data is not of the type we want, and we write expressions in {{}}, which makes the template cumbersome and hard to read. So this is generally not a good writing scheme, and Vue gives us some better schemes, computed attributes being one of them

With computed we can process the data into the format we want, rather than using longer computed expressions in templates,

// SRC /pages/ postdetail.vue
// Through computed HTML templates/image formatting, and so on
const currentHTML = computed(() = > {
  if (currentPost.value && currentPost.value.content) {
    return md.render(currentPost.value.content)
  }
  return { ni: 'ni'}})const currentPost = computed<PostProps>(() = > store.getters.getCurrentPost(currentId))
const currentImageUrl = computed(() = > {
  if (currentPost.value && currentPost.value.image) {
    const { image } = currentPost.value
    return (image as ImageProps).url + '? x-oss-process=image/resize,w_850'
  } else {
    return null}})Copy the code

Watch detects data changes in Vue3

Vue3 — Watch document address

While computing properties is more appropriate in most cases, sometimes a custom listener is required. That’s why Vue provides a more generic way to respond to changes in data with the Watch option. This approach is most useful when asynchronous or expensive operations need to be performed when data changes.

// Simple app for watch
watch(data, () = > {
  document.title = 'updated ' + data.count
})
// The two parameters of watch also represent the new value and the old value
watch(refData.count, (newValue, oldValue) = > {
  console.log('old', oldValue)
  console.log('new', newValue)
  document.title = 'updated ' + data.count
})

// watch returns an array of values
watch([greetings, data], (newValue, oldValue) = > {
  console.log('old', oldValue)
  console.log('new', newValue)
  document.title = 'updated' + greetings.value + data.count
})

// Use getters to write an item in the Watch Reactive object
watch([greetings, () = > data.count], (newValue, oldValue) = > {
  console.log('old', oldValue)
  console.log('new', newValue)
  document.title = 'updated' + greetings.value + data.count
})
Copy the code

Using the Watch option allows us to perform an asynchronous operation (accessing an API), limit how often we perform that operation, and set the intermediate state until we get the final result. These are all things you can’t do with computed properties.

In addition to the Watch option, you can also use the imperative VM.$watch API.

Evaluate properties VS listeners

In project development, it is easy to abuse Watch when you have some data to work with: it changes with other data, but it is often better to use computed attributes rather than mandatory Watch callbacks

Computed properties are cached based on their response dependencies. Computed properties are reevaluated only when the associated reactive dependencies change. This means that as long as author.books has not changed, multiple visits to the publishedBookMessage calculation property will immediately return the previous calculation without having to execute the function again.