vue3初探

1. vue3的基本用语与vue区别

1.1 vue中声明的改变

  Counter: {{ counter }}

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')

针对上面的语法进行解析
对于我自己的理解Vue.createApp相当于vue2的 new Vue().$moute 但是这个语法更加好的地方在于链式调用更好的扩充。：

Vue.createApp().component('todo-item', {
  template: `
This is a todo
`
})..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
  }
}

里面可以写生命周期等

3. Teleport

4. 片段

5. 自定义事件