VUE 学习合集

核心图

component & components

component是注册全局组件，在实例化VUE前调用，注册后可以全局使用

components是局部注册组件，注册后只能在当页调用。

个人建议 优先使用components，不然很容易出现recursive components…

生命周期

beforeCreate
Created 创建
beforeMount
Mounted 安装 挂载
beforeupdate
updated
beforeDestroy
Destroyed 销毁

数据更新

data return

不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件

MVVM

vue-v

vue -V或者是vue --version查询的是vue-cli的版本,也就是vue脚手架的版本,如果想要查看vue的版本,直接去项目中,找到package.json文件夹找"dependencies"然后就可以看到你装的vue的版本了,截至现在vue的版本是2.6.10,预计2020年上半年vue3.x的版本才会正式推出
“dependencies”: {
“core-js”: “^2.6.5”,
“vue”: “^2.6.10”,
“vue-router”: “^3.1.3”
},

计算属性缓存 vs 方法

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算属性vs侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。异步操作 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

条件渲染

v-if
v-else
v-else-if
v-show
key
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处

列表渲染

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。

<my-component v-for="item in items" :key="item.id"></my-component>

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

data

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，即需要retrun样式

父子组件通信

通过 Prop 向子组件传递数据
$emit()

组件名大小写

kebab-case
Vue.component(‘my-component-name’, { /* … / })
PascalCase
Vue.component(‘MyComponentName’, { / … */ })

过渡

• v-enter 开始
• v-enter-active 过渡
• v-enter-to 结束
• v-leave
• v-leave-active
• v-leave-to

响应式原理

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。