主页 / 问题 / 1006306
Accepted
Lyy
Asked:2020-07-24 22:42:25 +0000 UTC2020-07-24 22:42:25 +0000 UTC

为什么单击与该方法无关的按钮时会调用该方法？

  • 772

fullName请解释为什么单击按钮时调用该方法？

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false;
Vue.config.devtools = false;

let sample = new Vue({
  el: '.sample',
  data: {
    firstName: '',
    lastName: '',
    showText: false
  },
  methods: {
    fullName() {
      console.log('render fullname');
      return this.firstName + ' ' + this.lastName;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="wrapper">
  <div class="sample">
    <input type="text" v-model="firstName">
    <hr>
    <input type="text" v-model="lastName">
    <hr>
    <h2>Hello, {{ fullName() }}</h2>
    <hr>
    <button class="btn btn-success" @click="showText = !showText">
      ToggleText
    </button>
    <hr>
    <div v-show="showText">Some text</div>
  </div>
</div>

https://codepen.io/anon/pen/voGPNq?editors=1010

我知道你需要将这个方法推入属性computed中，但我不明白它为什么以及如何工作，因为我不明白为什么fullName在属性中调用该方法methods。

当您单击按钮时，是重新绘制sample带有子元素的整体还是什么？

vue.js

1 个回答

  1. Best Answer

    您问题中代码的简化和稍微修改的 HTML 标记：

    <div id="app">
  <h2>Hello, </h2>
  <input type="text">
  <button type="button">ToggleText</button>
  <p>Some text</p>
</div>

    这是您可以示意性地表示此片段的DOM树的方式：

    div id="app"
--h2
  --Hello
--input type="text"
--button type="button"
  --ToggleText
--p
  --Some text

    我们还将 Vue 虚拟 DOM（VNode）示意性地表示为抽象数据结构：

    {
  data: {
    attrs: {id: 'app'}
  }
  tag: 'div'
  text: undefined
  children: [{
    data: undefined
    tag: 'h2'
    text: undefined
    children: [{
      data: undefined
      tag: undefined
      text: 'Hello,  '
    }]
  }, {
    // ... другие дочерние узлы
  }]
}

    VueJS 使用虚拟 DOM，如果需要进行更改，则首先对虚拟 DOM 进行更改，然后与原始 DOM 进行比较。最后的更改是对真实的 DOM 进行的。

    在您看来，您如何确定函数（方法）的结果与原始结果不同？如果在这个函数中执行了任何异步操作？在这种情况下，您可能需要执行一个功能。并且它将始终执行，与计算属性 ( computed) 不同，计算属性 ( ) 的结果被缓存，并且仅当反应性依赖项发生变化时才执行重新计算（来自字段的数据，来自 的props其他data字段computed等）。

    回想一下，组件是具有自己名称的可重用 Vue 实例，并且具有与根实例相同的选项，例如data、computed、watch等methods。

    每个组件实例都有一个与之关联的观察者实例，该实例将在组件呈现为依赖项时标记所有受影响的字段。稍后，当调用标记为依赖项的字段的 setter 时，该 setter 会通知观察者，这反过来会触发重新渲染. -来源。

    每个组件在根元素内都有一个责任区域：

    <template>
  <!-- Зона ответственности компонента в пределах блока DIV -->
  <div>
    <!-- ... остальная разметка. -->
  </div>
</template>

    并且应用程序实例不能直接访问您在字段中指定其选择器的元素el，例如：el: '#app'等el: '.sample'。

    在您的情况下：当字段更改时，showTextDOM 会在带有 class 的块内重新呈现sample。并且在渲染时，它总是会被执行fullName()。

    // Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false;
Vue.config.devtools = false;

const app = new Vue({
  el: '#app',

  data: {
    firstName: '',
    lastName: '',
    showText: false,
  },

  computed: {
    simple: function() {
      console.log('simple');
      return 'Mr. ' + this.firstName;
    },
  },

  methods: {
    fullName: function() {
      console.log('render fullname');
      return this.firstName + ' ' + this.lastName;
    },
    toggle(event) {
      this.showText = !this.showText;
    }
  }
});

// document.querySelector('h1').classList.add('new');
    <div id="app">
  <h1>Hello, {{ simple }}</h1>
  <h2>Hello, {{ fullName() }}</h2>

  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
  <button type="button" @click="toggle">ToggleText</button>

  <p v-show="showText">Some text</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

    有用的链接：什么是虚拟 DOM？（原创）。

    • 2

相关问题