Vue官方文档笔记

1、如何创建一个vue实例对象？

var vm = new vue({
          el: "#app",  //标签id 或 标签类名
          data:{ //双向绑定的数据
              message: "王大锤",
              show: true,
              arr: [
                  { name: "王大锤", age: 18 }, { name:"罗小虎", age: 19 }
              ]
          }
      })

当一个vue实例（如上面的vm）被创建后，它将data对象里面的所有的属性加入到vue的响应式系统中。当这些属性的值发生改变时，视图会产生“响应”， 即视图展示最新的数据。

如何双向式绑定数据？用v-model来绑定数据，如：

<input v-model="message" />

 

2、if  else  如何实现？用v-if、v-else、v-else-if，如：

<div v-if="show">show为true展示</div>
<div v-else>show为false展示</div>

3、for循环如何使用？

• 不带索引，格式：v-for = "item  in  arr"，如：

  <div v-for="item in arr">{{item.name}}---{{item.age}}</div>

• 带索引，格式：v-for = "(item, index)  in  arr"，如：

  <div v-for="(item, index) in arr">{{index}}--{{item.name}}</div>

• for循环除了能对数组进行遍历，还能对对象进行遍历，遍历对象的属性，格式：v-for = "value  in  object"  /  v-for = "(value, name)  in  object"   /   v-for = "(value, name, index)  in  object"

 

4、vue实例创建后，data对象里面的所有属性都会加入到响应式系统中，当这些属性的值发生改变时，视图将会产生“响应”，如果不想被响应式系统追踪变化，如何操作？

　　使用object.freeze()方法可以处理不想被追踪的数据。

 

5、如何知道当前vue实例对象作用在哪个标签上？

　　vue实例.el 就是目标标签，如vm.el == document.getelementbyid("#app")。在实例里面，this.$el指向的也是目标标签。

 

6、如果vue实例中的data里面的属性值变化我们想及时知道，如何做？

　　在watch方法里面增加对属性的监听，这样当属性的值进行变化时，watch里面回及时知道。比如想监听data里面message属性的值变化。

//第一种方式
vm.$watch('message', function(newvalue, oldvalue){
    //这个回调函数会在 ’vm.message‘ 改变后调用
})

//第二种方式，在vue实例里面写
      new vue({
          el: "#app",
          data: {
              message: "hello",
              //...
          },
          watch: {
              message: function(newvalue, oldvalue){
                //这个回调函数会在‘message'改变后调用
              }
          }
      })

 

7、为什么不能在vue实例的选项属性或回调中使用箭头函数？
　　比如类似于 created: ()=>{ console.log(this.message) },  或vm.$watch('a', newvalue => this.mymethod())。

　　因为箭头函数中并没有this, 如果你使用了箭头函数，然后箭头函数中又使用了this。为了找到这个this，当在当前箭头函数中找不到这个this时，系统会一直向上级词法作用域去查找，直至找到为止，所以会经常导致出现uncaught  typeerror: cannot  read  property  of  undefined  或  uncaught  typeerrorr:  this.mymethod  is  not  a  function  之类的错误。

 

8、一个vue实例，从创建到销毁，经历了哪些过程？也是说它的生命周期是怎样的？

　　主要有8个步骤

　　8.1  beforecreate:  创建vue实例，初始化实例的事件、injections(注射：一般是检查是否有父级信号注入，在这里可以接收对父级组件或父级属性的引用，与父级提供的provide属性相配合)、reactivity(反应性：初始化监听属性变化的方法，如watch)。

　　8.2  created: 在实例进入created后，会判断它是否包含“el"option(选项)。如果没有的话，它会调用vm.$mount(el)这个方法，然后执行下一步；如果有的话，直接执行下一步。紧接着会判断是否含有”template"这个选项，如果有的话，它会把template解析成一个render函数。

　　8.3  beforemount:  在beforemount阶段中，完成render(渲染),  vm.$el创建完成，并将渲染出来的内容挂载到dom节点上。

　　8.4  mounted:  在mounted阶段，进行数据请求 --> data数据更新  -->  然后视图重新渲染  -->  再数据变化  -->  再重新渲染等等循环往复操作。这个对数据进行变化的过程，其实还包含了beforeupdate和updated两个周期函数。

　　8.5  beforedestroy:  当vue实例需要被销毁时，执行beforedestroy函数，再这里拆卸属性侦听器(watch)、子组件、事件监听器(method)等等。

　　8.6  destroyed:  最后一步，销毁vue实例，完成了它丰功伟绩的一生！

这是官方给出的一张生命周期图：

9、v-once是什么指令，有什么用？

　　一次性插值，再html标签中添加v-once属性，表示标签里绑定的文本插值只会展示第一次加载的数据。后面如果那个数据更改了，这个标签里面的内容不会再进行更新。

 

10、如果相比文本插值转成html标签(把绑定的数据转成html标签)，如何操作？

　　使用v-html属性，如：<div  v-html="customhtml"></div>

　　注意：动态渲染的任意html可能会非常危险，因为它很容易导致xss攻击。请只对可信内容使用html插值，绝不要对用户提供的内容使用插值。

　　

11、对于在html标签中的插值使用双括号{{message}}来绑定数据，如果想把数据绑定在html标签中的属性上，如类名(.)、样式(style)、自定义属性等如何操作？

　　一般格式为 v-bind:属性名 = "变量名"，如：

<div v-bind:class="myclass" v-bind:style="mystyle" v-bind:key="mykey"></div>

　　绑定事件的格式为  v-on:事件类型 = "事件名"，如：

<input  v-on:click="showmsg"   v-on:focus="getfocus"   v-on:blur="getblur" />

 

12、对于表单标签的一些存在即为true的属性，如何让它们默认为false(比如复选框checkbox的checked属性，所有表单标签的disabled属性) ？

　　比如： 

<input type="checkbox" checked/> 
<input type="checkbox" checked="true" /> 
<input type="checkbox" checked="false"/>

　　这三种写法的效果是一样的，即这些复选框一渲染出来就是默认选中状态，类似的disabled属性也是这个表现。

　　那么如何让它们默认为false呢？用v-bind, 比如：

<input type="checkbox" v-bind:checked="false"/> 
<input v-bind:disabled="false"/>

 

13、vue模板语法除了绑定变量，还能绑定表达式，如：

<div>{{number + 1}} ， {{ok ? '展示':'隐藏'}} ，{{message.split('').reverse().join('')}}</div>

 

14、v-bind和v-on的缩写方式：

　　v-bind:  可以缩写成 :  

<div v-bind:href="url" v-bind:class="myclass"></div>

可以缩写成

<div :href="url" :class="myclass"></div>

　　v-on: 可以缩写成 @ 

<input  v-on:focus="getfocus" v-on:click="clickme"/>

可以缩写成

<input @focus="getfocus" @click="clickme"/>

 

15、模板内的表达式可以进行简单运算，如果在模板内进行复杂逻辑有什么后果？有什么替代方案？

　　在模板中放入太多的逻辑会让模板过重且难以维护。因此，对于任何复杂逻辑，应该使用计算属性。如：

<div id="example">
  <p>original message: "{{ message }}"</p>
  <p>computed reversed message: "{{ reversedmessage }}"</p>
</div>

var vm = new vue({
  el: '#example',
  data: {
    message: 'hello'
  },
  computed: {
    // 计算属性的 getter
    reversedmessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

　　我们可以像绑定普通属性一样在模板中绑定计算属性，普通属性和计算属性已经建立了依赖关系。当普通属性变化时，计算属性也会跟着更新。

　　当然我们能够看出，使用计算属性实现的效果，使用方法也能达到同样的效果，比如：

<p>reversed message: "{{ reversedmessage() }}"</p>

var vm = new vue({
  el: '#example',
  data: {
    message: 'hello'
  },
  methods: {
      reversedmessage: function () {
        return this.message.split('').reverse().join('')
      }
    }
})    

　　那么问题来了，既然使用计算属性和方法的效果是一样的，那么用哪个更好性能更高？

　　这个要具体问题具体分析，看用在哪些场景下。计算属性是基于它们的响应式依赖进行缓存的，只有相关响应式依赖发生改变时他们才会重新求值。这就意味着只要message还没发生改变，多次访问reversedmessage计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

　　因此，根据实际情况是否需要缓存，来判断是使用计算属性，还是使用方法，让性能更高。

　　另外，计算属性vs侦听属性的区别比较，在某种场景下：当有些数据需要随着其他数据的变动而变动时，通常更好的做法是使用计算属性，而不是命令式的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
    }
  }
})

　　可以看出，在这种场景下，使用计算属性比侦听属性要好的多。

 

16、给标签绑定类名和内联样式，有几种写法？

　　主要有两种：对象语法和数组语法，看下面的例子：

<div :class="{classone: classobj.isok, 'classtwo': classobj.isno}">class的对象语法</div>
<div :class="{'classone': classobj.isno, 'classtwo': classobj.isok}">class的对象语法</div>
<div class="classzero" :class="classobj2">class的对象语法</div>
<div :class="classobj3">class的数组语法</div>
<div :class="[classobj3[0], classobj3[1]]">class的数组语法</div>
<div :style="{fontsize: styleobj.fontsize, border: styleobj['border-bottom']}">style的对象语法</div>
<div :style="styleobj">style的对象语法</div>
<div :style="[styleobj, styleobj2]">style的数组语法</div>

data:{
    classobj: { isok: true, isno: false }, //class对象语法
    classobj2: { classone: true, classtwo: true }, //class的对象语法2
    classobj3: ['classone', 'classtwo'],   //class的数组语法
    styleobj: { fontsize: '50px', 'border-bottom': '8px dashed purple', color: 'red' }, //内联样式的对象语法
    styleobj2: { borderleft: '3px solid red', 'border-right':'5px solid green' }, //内联样式的对象语法
},

最后这8个div渲染为：

<div class="classone">class的对象语法</div>
<div class="classtwo">class的对象语法</div>
<div class="classzero classone classtwo">class的对象语法</div>
<div class="classone classtwo">class的数组语法</div>
<div class="classone classtwo">class的数组语法</div>
<div style="font-size: 50px; border: 8px dashed purple; ">style的对象语法</div>
<div style="font-size: 50px; border-bottom: 8px dashed purple; color: red">style的对象语法</div>
<div style="font-size: 50px; border-bottom: 8px dashed purple; color: red; border-left: 3px solid red; border-right: 5px solid green;">style的数组语法</div>