vue中的this指向问题

2019-11-14 11:21:34
<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script></head><div id="app" style="width: 100%;height: auto;font-size:20px;">
    <p id="id1"></p>
    <p id="id2"></p></div><script type="text/javascript">
    var message = "Hello!";
    var app = new Vue({
        el:"#app",
        data:{
            message: "你好!"
        },
        created: function() {
          this.showMessage1();    //this 1
          this.showMessage2();   //this 2
        },
        methods:{
            showMessage1:function(){
                setTimeout(function() {
                   document.getElementById("id1").innerText = this.message;  //this 3
                }, 10)
            },
            showMessage2:function() {
                setTimeout(() => {
                   document.getElementById("id2").innerText = this.message;  //this 4
                }, 10)
            }
        }
    });</script></html>


第一个输出英文"Hello!”,第二个输出中文“你好!”。这说明了showMessage1()里的this指的是window,而showMessage2()里的this指的是vue实例。
※  对于普通函数(包括匿名函数),this指的是直接的调用者,在非严格模式下,如果没有直接调用者,this指的是window。showMessage1()里setTimeout使用了匿名函数,this指向
window。
※  箭头函数是没有自己的this,在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例,所以它里面使用的this指向vue实例。
注:
【普通函数的this】
普通函数的this是由动态作用域决定,它总指向于它的直接调用者。具体可以分为以下四项:
this总是指向它的直接调用者, 例如 obj.func() ,那么func()里的this指的是obj。
在默认情况(非严格模式,未使用 'use strict'),如果函数没有直接调用者,this为window
在严格模式下,如果函数没有直接调者,this为undefined
使用call,apply,bind绑定的,this指的是绑定的对象
绑定vue实例到this的方法
为了避免this指向出现歧义,有两种方法绑定this。
使用bind



showMessage1()可以改为:showMessage1:function(){
    setTimeout(function() {
       document.getElementById("id1").innerText = this.message;  //this 3
    }.bind(this), 10)}


对setTimeout()里的匿名函数使用bind()绑定到vue实例的this。这样在匿名函数内的this也为vue实例。
把vue实例的this赋值给另一个变量再使用
showMessage1()也可以改为

showMessage1:function(){
    var self = this;
    setTimeout(function() {
       document.getElementById("id1").innerText = self.message;  //改为self
    }.bind(this), 10}


  • 2020-04-01 10:15:11

    vue-cli3.0中vue.config.js的基本配置(去除esLint提示和解决build后静态文件路径报错)

    vue-cli是开发vue项目必不可少的脚手架工具,3.0版本之前的目录结构是由config目录的,关于webpack配置的文件都放在该目录里面,而3.0版本之后做了一个大更新,webpack相关的默认配置都帮你集成到webpack的npm 包里面去了,官方提供的一种修改配置的方式就是开发者自己在项目的根目录(与src同层级的目录)下建立一个vue.config.js的文件,然后去覆盖自定义的配置,达到你想要的效果,下面写一个基本的默认配置

  • 2020-04-01 10:21:20

    Vue extend $mount 构造器详解

    本节介绍两个 Vue.js 内置但却不常用的 API——extend 和 $mount,它们经常一起使用。不常用,是因为在业务开发中,基本没有它们的用武之地,但在独立组件开发时,在一些特定的场景它们是至关重要的。

  • 2020-04-01 15:36:52

    CSS3中的transition属性详解

    transition: property duration timing-function delay transition属性是个复合属性,她包括以下几个子属性: transition-property :规定设置过渡效果的css属性名称 transition-duration :规定完成过渡效果需要多少秒或毫秒 transition-timing-function :指定过渡函数,规定速度效果的速度曲线 transition-delay :指定开始出现的延迟时间