笔记---vue

一、v-model原理

1. 数据双向绑定

<input type="text" id="username" />
<div>
  显示：
  <span class="uName"></span>
</div>
<script>
  let obj = {}
  Object.defineProperty(obj, 'username', {
    get: function () {
      console.log('取值')
    },
    set: function (val) {
      console.log('设置值')
      document.getElementById('uName').innerText = val
    },
  })
  document.getElementById('username').addEventListener('keyup', function () {
    obj.username = event.target.value
  })
</script>

二、data()为什么是函数

• 是一个闭包函数，每一个组件都有自己的私有作用域，确保各组件数据不会相互干扰
• 纯对象 => 干扰

data(){
    return {
        message:"vue",
        tel:""
    }
}

三、v-if和 v-show

v-if

• 不满足条件，不会渲染dom ———— 单次选择

<button v-if="val == '1'">btn1</button>
<button v-if="val == '2'">btn2</button>
<script>
    data(){
        return{
            val:'2'
        }
    }
</script>

v-show

• 隐藏dom，多次切换
• 不能用于权限操作

<button @click="changeShow">改变type</button>
<script>
    data(){
        return{
            type:false
        }
    },
    method:{
        changeShow(){
            this.type = !this.type
        }
    }
</script>

四、computer和watch区别

(一)、computer

• 计算属性，计算出一个结果，函数值改变了就会重新计算
• 初始化的时候会自动计算一次
• 读取数据缓存

const num = ref(1)
const num2 = computed(()=>{
    return num.value + 10
})

(二)、watch

• 监控某个数据，被监控的数据更改，则watch执行
• 初始化的时候不会自动执行一次

const num3 = ref("未成年")
wacth(num3,(newVal, oldVal)=>{
    if(newVal >= 18){
        num3.value = "已成年"
    }
},{
    immediate:true  //初始化自动执行一次
})