vue3入门人话版（三）：响应式基础

单向绑定和双向绑定

首先了解两个概念，数据是指js中定义的变量，dom是指浏览器对前端代码的解读。

从数据-》 视图，仅仅需要渲染一次即可，也就是正常渲染。但是从视图-》数据，实际上省略了一步，那就是数据-》 视图-》 数据-》 视图，也就是说我们首先进行了单向绑定渲染视图，然后触发某些js代码执行了变量修改，但是注意，此时的变量修改是发生在内存当中（所有的变量都在内存，这应该没有争议吧？），而内存当中的修改是不会触发浏览器重新渲染的，这也是问题所在。

vue响应式解决

使用ref()包裹变量

<script setup>
import { ref } from 'vue';


    let msg=ref(1)
    let rawhHtml="<div>Content goes here</div>"
    let dynamicId=ref(1)

  const clickHandler = () => {
    dynamicId=dynamicId+1;
    msg=msg+1;
    };

  

</script>

<template>
  <!-- <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p> -->

  <div id="app"> 
    <span>Message: {{ msg }}</span>
    <div id="app2">
      <p>Using v-html directive: <span v-html="rawhHtml"></span></p>
      <div id="app3">
        <div v-bind:id="dynamicId"></div>
          <button @click="clickHandler()">Click Me</button>
      </div>
    </div>
  </div>

</template>
<style scoped></style>

组件模版

这里的组件模版大概就是vue后缀的每一个单文件，不过只需要记住它可以使用单位结构解决即可（解决方式为在 <script setup> 标签内定义你所需要的一切）
https://cn.vuejs.org/guide/scaling-up/sfc