1. vue3的基本用语与vue区别
1.1 vue中声明的改变
<div id="counter">
Counter: {{ counter }}
</div>
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter')
针对上面的语法进行解析
对于我自己的理解Vue.createApp相当于vue2的 new Vue().$moute 但是这个语法更加好的地方在于链式调用更好的扩充。：
Vue.createApp().component('todo-item', {
template: `<li>This is a todo</li>`
})..directive().mount()...
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
console.log(vm.count) // 4
console.log(app.count); // undefined
在vue2中
var app = new Vue({
el: '#app',
data: {
count: 4
}
})
console.log(app.count); // 4
根据VUE3讲解
const app = Vue.createApp({ /* 选项 */ }) // 这是一个应用实例
const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app') // 这是一个组件实例
new Vue() = Vue.createApp().$mounte
2. 组合式 API
setup (props) {
let repositories = []
const getUserRepositories = async () => {
repositories = await fetchUserRepositories(props.user)
}
return {
repositories,
getUserRepositories // functions returned behave the same as methods
}
}
里面可以写生命周期等
