Data, methods, compute properties, listeners

code

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Common template syntax</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    / / data
    data() {
      return {
        message: "Hello World!".num: 20.price: 5}},/ / method
    methods: {handleClick(){
        alert(this.message);
      },
      // We write a getTotal() method inside the method and use it inside the interpolation
      getTotal(){
        return this.num * this.price; }},// We can use this in interpolation to get a total price: num * price
    // But we want to make the interpolation more semantic by defining a total to represent the result of the calculation
    Total = num * price; // Total = num * price
    // So there are computed properties, which are computed properties
    computed: {
      total(){
        return this.num * this.price; }},// So we can use total directly in interpolation syntax
    template: '
       

         {{message}} {{" common calculation: "+ num * price}} {{" calculate attribute total:" + total}} {{" method getTotal() : 
         
       
 '
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Evaluate the difference between properties and methods

Calculated attribute: the calculated attribute will be recalculated when the dependent attribute of the calculated attribute changes. Method: the method is re-executed whenever the page is refreshed;

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Common template syntax</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    / / data
    data() {
      return {
        message: "Hello World!"}},/ / method
    methods: {handleClick(){
        alert(this.message);
      },
      getTime(){
        return Date.now(); }},computed: {
      time(){
        return Date.now(); }},template: ` < div > {{message}} < br / > {{" computation attribute time: "+ time}} < br / > {{" method getTime () : "+ getTime ()}} < br / > < button @ click =" handleClick "> button < / button > < br / > < / div > `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

The listener

If I want to print a message n seconds after a property changes, we need a listener;

The bottom line of computed properties is implemented using listeners, but it’s much easier to use computed properties!

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Common template syntax</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"}},// Listener (monitor)
    watch: {message(){
        console.log("Immediately: Message changed!");
        setTimeout(() = > {
          console.log("Three seconds later: Message changes!");
        }, 3000)}},template: ` 
       

         {{ message }} 
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Listener parameters

code

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Common template syntax</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"}},watch: {message(current, prev){
        console.log("Current value", current);
        console.log("Previous value", prev); }},template: ` 
       

         {{ message }} 
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

conclusion

Calculated properties: changes when dependent properties change;

Method: executed every time the page is refreshed;

Listener: Executed when a value that is being listened for changes and is the underlying implementation of evaluating properties;