Vue的学习Ⅻ（vue3的一些特性、mpvue ）

一、Composition API

它是为了实现基于函数的逻辑复用机制而产生的

reactive

import { createApp, h, reactive } from 'vue';

const App = {
  render() {              // render函数类似于template: `<div><span>李老板</span></div>`
    return h(
      'div', {            // h函数里面的第二个参数为一些变量或者方法
        onClick: () => {
          console.log('click');
        }
      }, [
        h('span', '李老板');
      ]
    );
  },
  setup() {               // 在生命周期内只执行一次，且在beforeCreate之前就执行
    const state = {
      name: '涂涂',
      age: 20
    }

    // 把需要进行响应式的数据用reactive包裹起来并生成一个响应式对象(在这里响应式已经达成)，类似于data
    let person = reactive(state);

    return {              // 返回对象的属性（方法）将来会和render函数的上下文合并
      person              // （也就是说在render函数里面访问数据就是返回的响应式对象）
    }
  }
};

createApp.mount('#app', App)

import { createApp, reactive, ref } from 'vue';

const App = {
  template: `<div @click='onClick'>{{ person.age }}</div>`,
  setup() {               // 只执行一次，且在beforeCreate之前就执行
    const state = {
      name: '涂涂',
      age: 20
    }

    // 把需要进行响应式的数据用reactive包裹起来并生成一个响应式对象，类似于data
    let person = reactive(state);

    function onClick() {
      person.age +=1;
    }

    return {              // 返回的对象将来会和render函数的上下文合并
      person,             // （也就是说在render函数里面访问数据就是返回的响应式对象）
      onClick
    }
  }
};

createApp.mount('#app', App)

ref

import { createApp, reactive, ref } from 'vue';

const App = {
  template: `<div @click='onClick'>{{ age }}</div>`,
  setup() {               // 只执行一次，且在beforeCreate之前就执行

    // 把原始值(单值)转化为为响应式对象
    const age = ref(0);

    function onClick() {
      age.value +=1;
    }


    return {              // 返回的对象将来会和render函数的上下文合并
      age,            
      onClick
    }
  }
};

createApp.mount('#app', App)

toRefs

import { createApp, reactive, ref } from 'vue';

const App = {
  template: `<div @click='onClick'>{{ age }}</div>`,    // 使用了toRefs方法就可以直接用age，而不是person.age
  setup() {               // 只执行一次，且在beforeCreate之前就执行
    const state = {
      name: '涂涂',
      age: 20
    }

    // 把需要进行响应式的数据用reactive包裹起来并生成一个响应式对象，类似于data
    let person = reactive(state);

    function onClick() {
      person.age +=1;
    }

    return {              // 返回的对象将来会和render函数的上下文合并
      ...toRefs(person),  // 是把person响应对象先脱壳，暴露出原始数据，再对每个原始数据实行ref包装
      onClick
    }
  }
};

createApp.mount('#app', App)

computed

计算属性getter函数，返回一个响应的不可变的Ref对象

二、mpvue

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
要知道vue的本质时操作dom，而小程序里面没有dom
但是mpvue实现了基于vue的一个开发小程序的前端框架，是因为mpvue把vue底层操作dom的操作都置了空，并对底层进行了其他的部署，所以达到了操作小程序的目的

本文只用于个人学习与记录