This is the fourth day of my August Challenge. Give me a thumbs up! New start, new challenge, come on!!

Just with the new API, you can still use the Options API

Way to learn

  • RFC(Request For Comments)

    github.com/vuejs/rfcs

  • Composition API RFC

    V3.vuejs.org/guide/compo…

The motivation

  • options API

    • Contains objects that describe component options (data, methods, props)
    • When developing complex components, the Options API has to split the logical code for a function into different options, which is not easy to maintain
    export default{
  data(){
    return {
      position: {x:0.y:0}}},created(){
    window.addEventLisener('mousemove'.this.handle)
  },
  destroy(){
    window.removeEventLisener('mousemove'.this.handle)
  },
  methods: {handle(e){
      this.position.x = e.pageX
      this.position.y = e.pageY
    }
  }
}
Copy the code

  • Composition API

    • A new set of apis added to vue.js 3.0
    • A set of function-based apis
    • The logic of the components can be organized more flexibly
import {reactive,onMounted,onUnMounted} from 'vue'
function useMousePosition(){
  const position = reactive({
    x:0.y:0
  })
  const update = (e) = >{
    postion.x = e.pageX
    position.y = e.pageY
  }
  onMounted(() = >{
    window.addEventLisener('mousemove',update)
  })
  onUnMounted(() = >{
    window.removeEventLisener('mousemove',update)
  })
  return position
}
export default {
  setup(){
    const position = useMousePosition()
    return {
      position
    }
  }
}
Copy the code

composition API

  • The createApp function is used to create a VUE object
  • The setup function, which is the entry to the Composition API
  • The reactive function is used to create reactive objects
<div id="app">
x:{{position.x}}
y:{{position.y}}
</div>
<script type="module">
  import {createApp,reactive} from './node_modules/vue/dist/vue.esm-browser.js'
  /** * 1. Import createApp on demand and create a VUE object that accepts options as parameters, i.e. options for a component. * You can pass options such as data, methods, computed, etc. * 2. 3. CreateApp returns a vue object */
  const app = createApp({
  The entry to the composition API is setup */
  setup(){
  /** * 1. The first parameter is props to receive the parameter from outside. It is a responsive object and cannot be destructed * 2. The second argument is context, attrs, Emit,slots * 3. If you want to return an object, you can use it in template, Methods, computed, and lifecycle usage functions. So setup can't get an instance of the component * so setup can't access data, methods, computed * this inside setup points to undefined * 5. Reactive converts data into a reactive object */

  const position = reactive({
    x:0.y:0
  })
  return {
    position
    }
  },
  mounted() {
    this.position.x = 100}})/** * the mount method is similar to vue2.0's $mount method, which is used to mount an instance to a specified location. * There are fewer members in app than in vue2, and none of them start with $
  app.mount("#app")
</script>
Copy the code
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
router.isReady().then(() = > app.mount('#app'))
Copy the code

Lifecycle hook functions

  • You can use component lifecycle hook functions in setup by capitalizing on before the lifecycle hook function, such as Mounted =>onMounted
  • Because setup is executed between beforeCreate and Created, functions that are executed between beforeCreate and Created can be placed in the setup without having to have corresponding implementations in the setup
  • RenderTracked is similar to renderTriggered in that it fires when the render function is called again. RenderTracked also fires on the first call to Render
  • The hook function destroy in VUE2 corresponds to unmounted

reactive/toRefs/ref

Both create responsive data

reactive

Is to create an object as a reactive object, which is a proxy object

const position = reactive({
  x:0.y:0
})
Copy the code

Reactive wraps the incoming object into a Proxy object. When x and y in position are accessed, the getter in the Proxy object is called to intercept and collect dependencies. When x and y change, the setter is called to intercept and trigger updates

 const {x,y} = useMousePosition()
Copy the code

When you structure the proxy object, you define variables x and y to receive position.x and position.x. Assignment of a primitive type is a copy of the value in memory, so x and y are primitives, independent of the proxy object. So when you assign to x and y you can’t trigger the setter, you can’t update, so you can’t structure the current reactive object

toRefs

ToRefs requires the incoming object to be responsive, similar to ref when dealing with the object’s properties.

ToRefs allow you to deconstruct properties in proxy objects

  • You can convert all the properties in a reactive object into a reactive object as well
  • ToRefs creates a new object, then iterates through all the properties of the passed object, converts the values of all the properties to the response object, mounts it to the newly created object, and returns the newly created object
    • Internally, it creates a value object for each property of the passed object, which is responsive. Value has a getter and setter, just like ref.
    • Getter returns the value of the corresponding property in the proxy object
    • Setters assign values to properties of proxy objects

ref

Convert normal values into responsive data

  • Wrap the basic type data into a reactive object containing the value object. Include getters and setters, collect dependencies in the getter, and trigger updates in the setter

The value object of a basic data type is processed when manipulating its value

function useCount(){
  const count = ref(0)
  const increase=() = >{
    count.value++
  }
  return{
    count,
    increase
  }
}
Copy the code
  • You can omit value when using it in a template
<div id="app">
  <button @click='increase'>button</button>
  <span>{{count}}</span>
</div>
Copy the code

Computed attribute

To simplify the code in the template, you can cache the results of the calculation and only recalculate when the data changes

  • First usage

    Pass in a function that gets a value. The function internally relies on reactive data. When the dependent data changes, it retrieves the data and runs the function. Computed returns an immutable, responsive object, similar to an object created with ref, with a single value attribute through which the value of the object is obtained. You can omit value when using attributes in templates

    computed(() = >count.value+1)
Copy the code

  • Second usage

Pass in an object that has a getter and setter and returns an immutable responsive object. Getters are fired when values are accessed, setters are fired when values are set

const count = ref(1)
const plusOne = computed({
  get:() = >count.value + 1.set:val= >{
    count.value = val-1}})Copy the code