QuickStart 01 - Quick Start (2021.01.16)

Menus

Create a new vue3 project base on vite

npm init vite-app hello-vue3

Just like npx usage

Different mounting from vue2

In vue2, we init vue instance by using new Vue(...) .

Now you can init like this:

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')

Setup Function

In vue2, we have data function, methods option, computed option and watch option etc.

In vue3, we can write our functional logics in our setup function. This feature is one of composition api’s features. I feel it’s very useful because I can reuse functional logics very easily.

Now let’s write a simple demo:

<template>
  <div>
    <h2>setup function</h2>
    <p>author name: {{author.name}}</p>
    <p>author age: {{author.age}}</p>
    <br>
    <p>author msg: {{msg}}</p>
  </div>
</template>
<script>
export default {
  name: 'SetupFunction',
  setup() {
    const author = {
      name: '冬沐',
      age: 23
    }
    let msg = 'hello, my name is 冬沐.'
    return {
      author,
      msg
    }
  }
}
</script>
<style>
</style>

Like vue2, our data is rendered in page.

Then let’s try to change our data value:

import { onMounted } from 'vue'
export default {
  name: 'SetupFunction',
  setup() {
    let author = {
      name: '冬沐',
      age: 23
    }
    let msg = 'hello, my name is 冬沐.'
    let count = 0
    onMounted(() => {
      setInterval(() => {
        count++
        author.age++
        if (count % 2 === 0) {
          author.name = '冬沐'
          msg = 'hello, my name is 冬沐.'
        } else {
          author.name = 'Bill Ann'
          msg = 'hello, my english name is Bill Ann.'
        }
      }, 1000)
    })
    return {
      author,
      msg
    }
  }
}

We’ll find that the view is not rendered. Our data can’t reflect to our view.

Reactive and Ref

We should use reactive or ref api to make our data attributes reactive.

Now let’s try them.

import { onMounted, reactive, ref } from 'vue'
export default {
  name: 'SetupFunction',
  setup() {
    let author = reactive({
      name: '冬沐',
      age: 23
    })
    let msg = ref('hello, my name is 冬沐.')
    let count = ref(0)
    onMounted(() => {
      setInterval(() => {
        count.value++
        author.age++
        if (count.value % 2 === 0) {
          author.name = '冬沐'
          msg.value = 'hello, my name is 冬沐.'
        } else {
          author.name = 'Bill Ann'
          msg.value = 'hello, my english name is Bill Ann.'
        }
      }, 1000)
    })
    return {
      author,
      msg,
    }
  }
}

First, we get reactive or ref api from vue.

For object, we use reactive api. For basic type, we use ref api. Different from reactive api, we should operate [attr name].value .

ToRefs

If we want to use object’s attributes directly on template, we can use toRefs api.

let’s try it.

<template>
  <div>
    <h2>setup function</h2>
    <p>author name: {{name}}</p>
    <p>author age: {{age}}</p>
    <br>
    <p>author msg: {{msg}}</p>
  </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
export default {
  name: 'SetupFunction',
  setup() {
    let author = reactive({
      name: '冬沐',
      age: 23
    })
    let { name, age } = toRefs(author)
    let msg = ref('hello, my name is 冬沐.')
    let count = ref(0)
    onMounted(() => {
      setInterval(() => {
        count.value++
        author.age++
        if (count.value % 2 === 0) {
          author.name = '冬沐'
          msg.value = 'hello, my name is 冬沐.'
        } else {
          author.name = 'Bill Ann'
          msg.value = 'hello, my english name is Bill Ann.'
        }
      }, 1000)
    })
    return {
      name,
      age,
      msg,
    }
  }
}
</script>
<style>
</style>

If we don’t use reactive or ref api to declare an attibute, we can excute code in the form of below.

<template>
  <div>
    <h2>setup function</h2>
    <p>author name: {{name}}</p>
    <p>author age: {{age}}</p>
    <br>
    <p>author msg: {{desc}}</p>
    <br>
    <p>normal attribute: {{normalAttribute.attr1}}</p>
  </div>
</template>
<script>
import { onMounted, onUnmounted, reactive, ref, toRefs, computed } from 'vue'
export default {
  name: 'SetupFunction',
  setup() {
    let author = reactive({
      name: '冬沐',
      age: 23
    })
    let { name, age } = toRefs(author)
    let msg = ref('hello, my name is 冬沐.')
    let count = ref(0)
    let normalAttribute = {
      attr1: 1
    }
    let desc = computed(() => {
      return name.value === '冬沐' ? 'hello, my name is 冬沐.' : 'hello, my english name is Bill Ann.'
    })
    let timer
    onMounted(() => {
      timer = setInterval(() => {
        count.value++
        age.value++
        normalAttribute.attr1++
        if (count.value % 2 === 0) {
          name.value = '冬沐'
        } else {
          name.value = 'Bill Ann'
        }
      }, 1000)
      console.log('vue instance is now mounted.')
    })
    onUnmounted(() => {
      clearInterval(timer)
      console.log('vue instance is now mounted.')
    })
    return {
      name,
      age,
      msg,
      desc,
      normalAttribute
    }
  }
}
</script>
<style>
</style>

In setInterval function, we use reactive attributes while increasing attr1. And attr1 can be reactive now. (just when we use reactive attributes at the same time)

I think it’s caused by the side effect function feature.

How to create a computed attribute

In vue3, we can use computed api to create a computed attribute.

Now let’s try it.

<template>
  <div>
    <h2>setup function</h2>
    <p>author name: {{name}}</p>
    <p>author age: {{age}}</p>
    <br>
    <p>author msg: {{desc}}</p>
  </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed } from 'vue'
export default {
  name: 'SetupFunction',
  setup() {
    let author = reactive({
      name: '冬沐',
      age: 23
    })
    let { name, age } = toRefs(author)
    let msg = ref('hello, my name is 冬沐.')
    let count = ref(0)
    let desc = computed(() => {
      return name.value === '冬沐' ? 'hello, my name is 冬沐.' : 'hello, my english name is Bill Ann.'
    })
    onMounted(() => {
      setInterval(() => {
        count.value++
        age.value++
        if (count.value % 2 === 0) {
          name.value = '冬沐'
        } else {
          name.value = 'Bill Ann'
        }
      }, 1000)
    })
    return {
      name,
      age,
      msg,
      desc
    }
  }
}
</script>
<style>
</style>

How to use watch in vue3

In vue3, we can use watch api to add a listener of an attribute.

<template>
  <div>
    <h2>setup function</h2>
    <p>author name: {{name}}</p>
    <p>author age: {{age}}</p>
    <br>
    <p>author msg: {{desc}}</p>
    <p>language: {{lang}}</p>
  </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue'
export default {
  name: 'SetupFunction',
  setup() {
    let author = reactive({
      name: '冬沐',
      age: 23
    })
    let { name, age } = toRefs(author)
    let msg = ref('hello, my name is 冬沐.')
    let count = ref(0)
    let desc = computed(() => {
      return name.value === '冬沐' ? 'hello, my name is 冬沐.' : 'hello, my english name is Bill Ann.'
    })
    let lang = ref('中文')
    watch(count, (val, oldVal) => {
      if (count.value % 2 === 0) {
        name.value = '冬沐'
        lang.value = '中文'
      } else {
        name.value = 'Bill Ann'
        lang.value = 'english'
      }
    })
    onMounted(() => {
      setInterval(() => {
        count.value++
        author.age++
      }, 1000)
    })
    return {
      name,
      age,
      msg,
      desc,
      lang
    }
  }
}
</script>
<style>
</style>

OnMounted and OnUnmounted in vue3

Same with above usage, vue3 use onMounted and onUnmounted api to listen mounted and unmounted.

let’s try them.

<template>
  <div>
    <h2>setup function</h2>
    <p>author name: {{name}}</p>
    <p>author age: {{age}}</p>
    <br>
    <p>author msg: {{desc}}</p>
  </div>
</template>
<script>
import { onMounted, onUnmounted, reactive, ref, toRefs, computed } from 'vue'
export default {
  name: 'SetupFunction',
  setup() {
    let author = reactive({
      name: '冬沐',
      age: 23
    })
    let { name, age } = toRefs(author)
    let msg = ref('hello, my name is 冬沐.')
    let count = ref(0)
    let desc = computed(() => {
      return name.value === '冬沐' ? 'hello, my name is 冬沐.' : 'hello, my english name is Bill Ann.'
    })
    let timer
    onMounted(() => {
      timer = setInterval(() => {
        count.value++
        age.value++
        if (count.value % 2 === 0) {
          name.value = '冬沐'
        } else {
          name.value = 'Bill Ann'
        }
      }, 1000)
      console.log('vue instance is now mounted.')
    })
    onUnmounted(() => {
      clearInterval(timer)
      console.log('vue instance is now mounted.')
    })
    return {
      name,
      age,
      msg,
      desc
    }
  }
}
</script>
<style>
</style>