终极 Vue 速查表

Vuejs已成为我们社区中最成功应用、最受喜爱和最值得信赖的前端 JavaScript 框架之一。Vue3 带来了许多新功能。本文将介绍 Vue2 和 Vue3 的所有基础知识。它基本上是一个 Vue 速查表，旨在让你的工作更轻松。

我们将把它分解成不同的部分，如全局 API、Vue 配置和其余部分。

Vue DOM

new Vue({})：此方法为 Vuejs 实例提供一个现有的 DOM 元素，用于挂载。所有 Vuejs 代码都定义在这里。
el：CSS 选择器字符串或实际的 HTMLElement，所有 Vuejs 代码都将挂载。
template：一个字符串模板，用作 Vue 实例的标记。您的 Vuejs 组件在这里定义。
render: h => h(App)：render 函数接收 createElement 方法作为其第一个参数，用于创建 VNode。将 createElement 别名为 h 是 Vue 生态系统中的常见约定，并且实际上是 JSX 所必需的。如果作用域中不存在 h ，您的应用将会抛出错误。
renderError (createElement, err)：当默认渲染函数遇到错误时，提供渲染输出。错误信息将作为第二个参数传递给函数。

Vue 数据属性

props：这是一个暴露的属性列表，用于接收来自其父组件的数据。您可以使用数组实现，然后将所有父组件的数据传递给它。它还接受额外的配置，用于数据类型检查和自定义验证。

    props:['users','samples']

data(){return{}}：这是特定 Vuejs 实例的数据对象。Vuejs 会将其属性转换为 getter/setter 方法，使其具有“响应式”功能。

    data() {
      return {
        name:"Sunil",
        age:80
    }
    }

computed：计算属性会计算值，而不是存储值。这些计算属性会被缓存，并且仅在依赖项响应性更改时重新计算。

    computed:{
      sumNumbers:function() {
        return this.a * 2
     }
    }

watch:这是一个对象，其中键是需要监视的表达式，值是相应的回调。它主要用来监听数据属性的变更。

    watch:{
      name:function(val,oldVal) {
       console.log('newval',val,'old',oldVal)
    } 
    }

methods：这些是要混入 Vue 实例的方法。可以使用this关键字直接在 VM 实例上访问这些方法。请始终避免使用箭头函数来定义方法。

    methods:{
      logName() {console.log(this.name)}
    }

赞助：

Vue 生命周期钩子

Vuejs 中的组件具有生命周期，该生命周期由 Vue 本身管理，包括创建组件、将组件挂载到 DOM、更新组件和销毁组件。

beforeCreate：在实例初始化之后、数据观察和事件/观察器设置之前立即同步调用。

    beforeCreated(){console.log('Before Created')}

created：这是在 Vue 实例创建后调用的。它是在实例初始化之后、数据观察和事件/观察器设置之前立即同步调用的。
beforeMount：在此阶段，它会检查要在 DOM 中渲染的对象中是否有可用的模板。如果没有找到模板，则将定义元素的外部 HTML 视为模板。
mounted：此方法在实例挂载后调用，其中 el 会被新创建的 vm.$el 替换。如果根实例挂载到文档内元素，则调用 mount 时 vm.$el 也将位于文档内。如果您想等到所有视图渲染完毕，可以使用nextTick钩子中的方法：this.$nextTick()
beforeUpdate：这会在反映原始 DOM 元素的更改之前触发。还请注意，在服务器端渲染期间不会调用钩子。
updated:调用此钩子时，组件的 DOM 已经更新，因此您可以在此处执行依赖于 DOM 的操作。但是，大多数情况下，您应该避免在钩子内部更改状态。为了响应状态变化，通常最好使用计算属性或观察器。
beforeDestroy：这是在 Vue 实例被销毁之前调用的。
destroyed：在 Vue 实例被销毁后调用。

Vue 3 生命周期钩子

Vue 3 还自带了生命周期钩子，这对于开发来说非常有用。要使用它们，我们必须将它们导入到我们的组件中，如下所示：

    import { onMounted, onUpdated, onUnmounted } from 'vue'

这里我们只需要导入我们想要使用的钩子。以下是 Vue 3 生命周期钩子：

onBeforeMount：此钩子在挂载发生之前被调用
onMounted：一旦组件被安装，这个钩子就会被调用
onBeforeUpdate：一旦反应数据发生变化并且重新渲染之前，就会调用。
onUpdated：在重新渲染组件后调用。
onBeforeUnmount：在 Vue 实例被销毁之前调用
onUnmounted：在 Vue 实例被销毁后立即调用。
onActivated：Vuejs中的组件可以保持活动状态，当该组件被激活时，会调用此钩子。
onDeactivated：一旦kept-alive组件被停用，就会调用此方法。
onErrorCaptured：这对于错误处理非常有用。一旦子组件捕获到错误，就会调用此钩子。

Vue 3 Composition API

在我们访问 Vue3 组合 API 之前，我们必须首先安装它：

    npm install @vue/composition-api

安装成功后，我们现在可以将其导入到我们的 main.js 文件中：

    import Vue from 'vue';
    import CompositionApi from '@vue/composition-api';

    Vue.use(CompositionApi);

完成这些之后，我们就可以在应用程序中使用 Vuejs Composition API 了。
现在让我们来看看 Vue 3 的一些特性：

**setup()**：组件实例创建后，会调用此函数。此方法接受两个参数props和context。- Props 是响应式值，可以被监听：

    export default {
      props: {
        age: String,
      },
      setup(props) {
        watch(() => {
          console.log(`Sunil is : ` + props.age + "years old");
        });
      },
    };

    - Context here has this properties `attrs`, `slots`, `emit`, `parent`, `root`. Always remember that the `this` keyword is not available in the setup function meaning that this won’t work :

    setup() {
      function onClick() {
        this.$emit // not available
      }
    }

refs：获取模板中元素或组件实例引用的新方法是使用ref方法。要使用这个方法，我们首先需要将其导入到我们的应用程序中，如下所示：

    import { ref } from '@vue/composition-api'

然后在我们的组件中像这样使用它：

    <template>
      <div>{{ count }}</div>
    </template>

    <script>
    import { ref } from '@vue/composition-api'
      export default {
        setup() {
          return {
            count: ref(0)
          }
        }
      }
    </script>

Vue 全局配置

我们可以在该Vue.config对象中定义所有 Vuejs 全局配置。

Vue.config.silent：此配置禁用所有 Vuejs 日志和警告
Vue.config.devtools：这添加了是否允许 vue-devtools 检查的配置
Vue.config.performance：此配置可在浏览器 devtool 时间线中启用组件初始化、编译、渲染和修补性能跟踪。
Vue.config.productionTip：这在 Vue 启动时启用生产提示。
Vue.config.ignoredElements：使 Vue 忽略 Vue 之外定义的自定义元素（例如，使用 Web Components API）。否则，它会抛出一个关于的警告Unknown custom element。
Vue.config.errorHandler：此配置为组件渲染功能和观察者期间未捕获的错误分配一个处理程序。
Vue.config.optionMergeStrategies：这定义了选项的自定义合并策略。此合并策略分别接收父实例和子实例上定义的选项值作为第一个参数和第二个参数。

Vue 模板和主题

上面的速查表能帮你加快工作流程，此外，还有一款很棒的工具，叫做即用型 VueJs 模板，它不仅实用，还能帮助你使用模板包中提供的即用型设计组件，创建视觉效果惊艳的应用程序。你绝对可以尝试一下，将其运用到你的应用程序中。如果你不想一开始就投入资金，也可以在AdminMart和WrapPixel下载最佳的免费和付费 VueJs 管理仪表盘和网站模板。

鏂囩珷鏉ユ簮锛�https://dev.to/suniljoshi19/the-ultimate-vue-cheat-sheet-for-vuejs-3-and-2-i8f