Long time no see, very miss; A day apart, like three years; One day does not hit the roof uncovered tile; I think I belong in the last sentence. Although February is very short, it is not the reason that I do not study. Although There is a New Year in February, it is not the reason that I do not study. Every time to always so ha ha ha ha, but down is really need to learn ah, I still need to earn money, after all, but also facing the sea spring flowers; After all, chopping wood and feeding the horses around the world; And grains and vegetables; And a future wife’s purse ha-ha-ha future child’s Oreo. Uvu has been releasing VUE3.0 for a while now, and the UI libraries are being adapted, so vuE3 is definitely on the way, so it’s a good idea to keep up with our trend, because it’s the sensitivity of a front-end person.

  1. The installation

    • Similar to vue2.X, vuUE – CLI is used for scaffolding installation, of course we will talk about vite tool installation in a moment

      vue create hello 
Copy the code

    • If you do not have the above interface, you need to upgrade your VUE-CLI version

      vue update -g @vue/cli
Copy the code

    • You can Select Vue 3 Preview or Manually Select features for version selection

  2. The shallow contrast

    • First, compare main.js (vue3 on the left, vue2.x on the right); Using createApp ()

    • Vue3’s Template supports multiple root tags, but vue2. X supports only one

      // vue2 <template> <div> Root element example </div> </template>Copy the code
      // vue3 <template> <div> Root element example 0</div> <h1> Root element example 1</h1> < H1 > Root element example 2</h1> </template>Copy the code

    • Vue3 uses a composite API

      • Previously, vue2.x had to return data, computed, Watch, Mounted, and so on, and the list of logical concerns grew as our component grew larger. This can lead to components that are difficult to read and understand. Shall we give an example? We have a table for examination and approval, need to run the south fill an option, up to the north to fill an option, to the east and the west, when you take a run up to the table, you will feel very tired, say one day when we said there is a place to this property can focus ran away, all these places don’t have to run throughout north and south, east and west. Now this is setup in VUe3.)

      • The new Setup component option is executed before the component is created and acts as an entry point to the composite API once props is resolved.

      • Warning Because the component instance has not yet been created when setup is executed, this is not in the setup option. This means that you will not be able to access any properties declared in the component — local state, computed properties, or methods — except props

      • Use ref to make any reactive variable work anywhere, as shown below

        const { user } = toRefs(props)
const repositories = ref([])
const getUserRepositories = async() = > {// Update 'prop.user' to 'user.value' to access the reference value
  repositories.value = await fetchUserRepositories(user.value)
}
Copy the code

      • Note the difference between REF, Reactive, toRef, and toRefs

    • The v-model usage on components in VUe3 has changed, replacing v-bind.sync

      // 在2.x中 
<ChildComponent v-model="pageTitle" />
<!--是以下的简写：-->
<ChildComponent :value ="pageTitle" @input ="pageTitle=$event" />
<!--如果要将属性或者事件名称改为其他，则需要在ChildComponent组件中添加model选项-->
// childCompnent.vue
<script>
	export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
      // 这将允许 `value` 属性用于其他用途
      value: String,
      // 使用 `title` 代替 `value` 作为 model 的 prop
      title: {
        type: String,
        default: 'Default title'
      }
    }
  }
  methods:{
    change(){
      this.$emit('cc','我被子组件改变了')
    }
  }
</script>
<!--所以，这个栗子中的v-model是以下的简写-->
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />
Copy the code
      // In 3.x, v-Model on a custom component is equivalent to passing a modelValue prop and receiving an update: modelValue event thrown: <ChildComponent V-model ="pageTitle" /> <! @update:modelValue="pageTitle=$event" /> <! <ChildComponent V-model :title ="pageTitle"/> <! <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />Copy the code

    • New context.emit, same as this.$emit (vue3 can only be used in methods, because this is different from this in vue2)

      import {SetupContext } from 'vue'
setup(props: Prop, context: SetupContext) {
    const toggle = () = > {
      context.emit('input', !props.value)
    }
    return {toggle}
}
Copy the code

    • Computed attributes are similar to previous 2.x attributes, except that they are referenced before being used

      setup(props: Prop, context: SetupContext) {
  const count = ref(0);
 	const changCount = computed(() = >{
    return count.value ++
  }) 
  return {
    count
  }
}
Copy the code

    • WatchEffect listening

      Create multiple reactive values by ref or Reactive, and trigger the function when any value changes.

      setup(props: Prop, context: SetupContext) {
  const count = ref(0);
  watchEffect(() = >{
    console.log(count)
  })
  return {
    count
  }
}
Copy the code

    • If any incorrect understanding, such as thorough understanding, update at any time

  3. The depth of the contrast

    • In Vue, Object.defineProperty cannot monitor subscript changes of data, resulting in no real-time response when assigning new values to arrays directly via array subscripts. The vue only for an array of variation method to push/pop/shift/unshift/splice/sort/reverse did hack processing, response is limited. Proxy is a new feature in ES6, which translates as “Proxy” and is used to indicate that it “proxies” certain operations. Proxy allows us to control external access to objects in a concise and easy-to-understand way. Its function is very similar to that of the proxy pattern in design mode.

      Proxy can be understood as a layer of “interception” before the target object. All external access to the object must pass this layer of interception. Therefore, Proxy provides a mechanism for filtering and rewriting external access.

    • The rest will be added in the next article