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

矫情吗；* 2023-03-12 09:30 2阅读 0赞

# 一、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的操作都置了空，并对底层进行了其他的部署，所以达到了操作小程序的目的**

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