Vue的实例、生命周期与Vue脚手架(vue-cli)实例详(6)

f、vm.$root:类型(Vue实例),当前组件树的根Vue实例,如果没有父实例,就是实例本身。

h、vm.$children:类型(Array(Vue实例)),当前实例的直接子组件

需要注意 $children 并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。

i、vm.$slots:类型({ [name: string]: ?Array<VNode> }),用来访问被 slot 分发的内容。每个具名 slot 有其相应的属性(例如:slot="foo" 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名 slot 中的节点。

k、vm.$refs:类型(Object),一个对象,其中包含了所有拥有 ref 注册的子组件;

l、vm.$isServer:类型(boolean),当前Vue实例是否运行于服务器;

官网对应

1.5.5、箭头函数

箭头函数是ES6引入的一种语法糖,使得写函数更加简便,类似Lambda表达式,基本格式如下:

()=>{}

示例:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>vue2实例</title>
 </head>
 <body>
 <div id="app1">
 </div>
 <script type="text/javascript">
  var m1=a=>a+1;
  console.log(m1(100));
  //类似
  var m2=function(a){
  return a+1;
  }
  console.log(m2(100));
  
  var m3=(a,b)=>a+b;
  console.log(m3(100,200));
  
  var m4=(a,b)=>{a++; b++; return a+b;}; //如果方法体中有多个表达式,则需要大括号与return
  console.log(m4(100,200));
 </script>
 </body>
</html>

结果:

二、生命周期 2.1、实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。

比如 created 钩子可以用来在一个实例被创建之后执行代码:

new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"

也有一些其它的钩子,在实例生命周期的不同场景下调用,如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。

不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 Vue 实例,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/426.html