vue3 笔记 - 声明式 一

官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

vue3编写有声明式和响应式。该文章仅记录声明式。vue3声明式与vue2相同。

一、生命周期

1. 创建之前 beforeCreate()
2. 已创建 created()
3. 挂载之前 beforeMount()
4. 已挂载 mounted()
5. 销毁之前 beforeUnmount()
6. 已销毁 unmounted()

二、模板语法

//文本插值 
{{ value }}

//原始html 
<p v-html="value"></p>

//属性绑定
<p v-bind:id="value"></p>
<p :id="value"></p>

//布尔型
<button :disabled="isButtonDisabled">Button</button>

//绑定多个值
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}
<div v-bind="objectOfAttrs"></div>


//JavaScript 表达式 
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>

//函数调用
<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

2.1 内置指令

1. v-text 更新元素的文本内容
2. v-html 更新元素的innerhtml
3. v-show 基于表达式值的真假性，来改变元素的可见性。页面渲染消耗多，适合频繁切换显示。
4. v-if 基于表达式值的真假性，来条件性地渲染元素或者模板片段。元素切换消耗多。
5. v-else 表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。
6. v-else-if 表示 v-if 的“else if 块”。可以进行链式调用。
7. v-for 基于原始数据多次渲染元素或模板块。
8. v-on 给元素绑定事件监听器。缩写@。
9. v-bind 动态的绑定一个或多个 attribute，也可以是组件的 prop。缩写：
10. v-model 在表单输入元素或组件上创建双向绑定。
11. v-slot 用于声明具名插槽或是期望接收 props 的作用域插槽。
12. v-pre 跳过该元素及其所有子元素的编译。
13. v-once 仅渲染元素和组件一次，并跳过之后的更新。
14. v-memo 缓存一个模板的子树。仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量 v-for 列表。
15. v-cloak 用于隐藏尚未完成编译的 DOM 模板。

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>



[v-cloak] {
  display: none;
}

template

<div v-cloak>
  {{ message }}
</div>

三、变量定义及使用

声明式定义和响应式不同，代码如下。变量是在函数中返回。

<template>
<p>{{ msg }}</p>
<div>
    <ul>
        <li v-for="(item,index) in list" :key="index">{{ item.value }}</li>
    </ul>
</div> 
<p ></p>
</template>
<script>
export default{
    name:'Test',
    data:function(){
        return{
            msg:"test",
            list:[
                {id:1,value:test1},
                {id:2,value:test2},
                {id:3,value:test3},
            ]
        }
    },
}
</script>

3.2 计算属性

?在computed中使用变量名作为方法名，可在模板中使用。计算属性也可以定义为方法，在methods中定义，但是计算属性基于它们的响应式依赖进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。

以下代码中计算属性now将不再更新，因为Date.now()不是响应式依赖。

<template>
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    },
    now: function () {
        return Date.now()
    }
  }
})
</script>

3.3 监听

通过 watch 选项提供了一个更通用的方法，来响应数据的变化。

之前使用开源vue后台框架，相同页面不同参数的时候，使用监听处理传过来的参数，便于多个页面显示。

<template>
<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
</template>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    question: '',
    answer:'',
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = newQuestion
    }
  },
})
</script>