一、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的操作都置了空,并对底层进行了其他的部署,所以达到了操作小程序的目的
本文只用于个人学习与记录