vue3.0
程序员文章站
2022-05-16 22:14:05
...
一、vue3.0尝鲜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-next尝鲜</title>
<script src="https://s1.zhuanstatic.com/common/js/vue-next-3.0.0-alpha.0.js"></script>
</head>
<body>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, computed, effect } = Vue
const RootComponent = {
template: `
<button @click="increment">
{{ state.name }}今年{{state.age}}岁了，乘以2是{{state.double}}
</button>
`,
setup() {
const state = reactive({
name: '徐同保',
age: 18,
double: computed(() => state.age * 2)
})
effect(() => {
console.log(`effect 触发了！ - ${state.name}今年${state.age}岁了，乘以2是${state.double}`)
})
const increment = () => {
state.age++
}
return {
state,
increment
}
}
}
createApp().mount(RootComponent, '#app')
</script>
</html>
二、@vue/composition-api
https://www.npmjs.com/package/@vue/composition-api
装包：
yarn add @vue/composition-api
main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueCompositionApi from '@vue/composition-api'
Vue.config.productionTip = false
Vue.use(VueCompositionApi)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
App.js:
<template>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
<script>
import { reactive, computed } from '@vue/composition-api'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
})
function increment() {
state.count++
}
return {
state,
increment
}
}
}
</script>
加法:
<template>
<div>
{{data.count}}
<div>
<button @click="handleAdd(1)">加1</button>
<button @click="handleAdd(2)">加2</button>
</div>
</div>
</template>
<script>
import { reactive } from '@vue/composition-api'
export default {
setup() {
const data = reactive({
count: 0
})
const handleAdd = (step) => {
data.count += step
}
return {
data,
handleAdd
}
}
}
</script>
<style>
</style>
上一篇： vite + typescript + vue3.0尝试
下一篇： Vue3.0 尝鲜后收获的知识点