vue3值得注意的点

创建实例通过createApp的方式

  Counter: {{ counter }}

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

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

全局方法变更

组件的v-model

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

v-model 参数

若需要更改 model 名称，而不是更改组件内的 model 选项，那么现在我们可以将一个 argument 传递给 model：

v-model 修饰符

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外，现在 3.x 还支持自定义修饰符：
添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 modelModifiers prop。
请注意，当组件的 created 生命周期钩子触发时，modelModifiers prop 包含 capitalize，其值为 true——因为它被设置在 v-model 绑定 v-model.capitalize="bar"。

app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  template: `
    
  `,
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
})

组合式api

可以把一部分共用逻辑和数据写在一块来复用，比如自己项目中经常用的search方法加载列表就可以抽出来了

//app.vue

//api.js
export const  getData = function(){
  return Promise.resolve({
    list:['a','b'],
    total:2
  })
}

//util.js
import { ref } from 'vue'
export const getSearchMethod = function(param,api){
  param = ref(param);
  var total = ref(0);
  var tableData = ref([]);
  var search = ref(function(){
    api(param.value).then(res=>{
      total.value = res.total;
      tableData.value = res.list;
    })
  })
  return {param,total,tableData,search}
}

Teleport

将容器放到指定父容器下,我们可以将它们嵌套在另一个内部，以构建一个组成应用程序 UI 的树。

  

    
Tooltips with Vue 3 Teleport
    

      
    
  

app.component('modal-button', {
  template: `
    
        Open full screen modal! (With teleport!)
    

    
      

        

          I'm a teleported modal! 
          (My parent is "body")
          
            Close
          
        
      
    
  `,
  data() {
    return { 
      modalOpen: false
    }
  }
})

片段

在 Vue 3 中，组件现在正式支持多根节点组件，即片段

v-for的key可以直接写在template上了

v-if的优先级比v-for高了

$on，$off 和 $once 实例方法已被移除，应用实例不再实现事件触发接口

filter移除