Vue之vue.js声明式渲染

Posted 2020-09-19 花信

html:

<div id="app">

  {{ message }}

</div>

Vue:

var app = new Vue({

  el: \'#app\',

  data: {

    message: \'Hello Vue!\'

  }

})

本例子由HTML模板（View）+Vue实例（ViewModel）组成。

创建Vue的实例，需传入一个选项对象，如：

数据（data）：Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。

属性（props）： 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

挂载元素（el）：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

计算（computed）：声明计算，处理复杂逻辑

方法（methods）：声明方法，VM 实例可以访问这些方法，或者在指令表达式中使用。计算属性默认有getter，但也可以自定义一个setter。

computed和method比较：methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。computed 性能会更好，但是如果你不希望缓存，你可以methods。

为什么需要缓存？

假设我们有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用 method 替代。

watch：观察和响应数据变化。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

    computed和watch比较：计算属性在大多数情况下更合适，但有时也需要一个自定义的 watch。watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。

扩展（extended）：扩展到另一个组件。

minxin：混合实例对象可以像正常的实例对象一样包含选项。

parent：指定已创建的实例之父实例，在两者之间建立父子关系。

component：声明组件，包含 Vue 实例可用组件的哈希表。

生命周期：

实例

 var app = new Vue({

          el: \'#app\',

          data: {

              message : "xuxiao is boy"

          },

           beforeCreate: function () {

                    console.group(\'beforeCreate 创建前状态===============》\');

                   console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined

                   console.log("%c%s", "color:red","data   : " + this.$data); //undefined

                   console.log("%c%s", "color:red","message: " + this.message) 

            }

}）

指令	描述
beforeCeate	在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created	实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用。 该钩子在服务器端渲染期间不被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate	数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
activated	keep-alive 组件激活时调用。 该钩子在服务器端渲染期间不被调用。
deactivated	keep-alive 组件停用时调用。 该钩子在服务器端渲染期间不被调用
bedoreDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。 该钩子在服务器端渲染期间不被调用。
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。