1.SFC单文件组件格式

<template>
  <div>
    <div> {{ '张麻子' | setName }} </div>
    <input type="text" v-model="name">
    <div v-for="item in 100" :key="item">{{ getNewName }}</div>
    <hr>
    <div v-for="item in 100" :key="'aaa' + item"> {{ setName1('张麻子1') }} </div>

  </div>
</template>

<script>
export default {
  // 数据定义
  data() {
    //为什么写return 
    // 每个组件 都使用自己的数据，对象是引用数据类型  
    //data:{}   直接覆盖 其他所有的组件的数据
    // data(){ return {}}   只在当前组件生效的 对象数据---每个组件的data 独立空间 
    return {
      name: "黄四郎 "
    }
  },
  //methods 方法
  methods: {
    setName1(str) {
      console.log('方法执行了一次...');
      return '名字:' + str;
    }
  },
  //过滤  vue3.x 没了
  filters: {
    setName(str) {
      return '名字:' + str
    }
  },
  //计算属性
  computed: {
    // 应用1： 教为复杂的计算 放到计算属性中
    // 应用2： 依赖缓存的特性 可以用来 监听数据的改变--代替watch     
    //将结果计算出来 保存到一个变量身上  getNewName
    //依赖缓存： 只要参与计算的数据源 不发生改变，函数体就不会重复执行
    getNewName() {
      console.log('计算属性执行了一次...');
      return '我的名字：' + this.name;
    }
  },

  watch: {
    //基本数据类型
    // name(newVal,oldVal){
    //   console.log('watch 监听到了 数据的改变...',newVal);
    // }
    name:{
      deep:true,  //深度监听
      immediate:true,  //进入页面瞬间 默认立即执行一次
      handler(newVal,oldVal){
         console.log('watch 监听到了 数据的改变...',newVal);
      }
    }
  }

}
</script>

<!-- scoped -->
<!-- css 作用域  -->
<style lang="less" scoped>
</style>

2.MVVM 原理[响应式-数据驱动-双向绑定] -vue3

MVVM 是什么？【设计思想】

M:Model 数据模型

V：view 视图页面

VM： ViewModel 视图和数据模型【双向绑定】

双向绑定的含义：数据改变导致页面视图的改变；页面视图的改变导致数据改变；

在vuejs中，数据改变导致页面视图的视图的改变，是通过 Object.defineProperty 对数据挟持，每次数据的改变都会自动触发 defineProperty 的set方法，更改数据同时重新渲染页面

在vuejs 中，页面视图的改变导致数据改变实现方式是：所有的dom节点绑定事件,页面发生改变就是事件被触发，调用数据修改【视图的改变】 defineProperty 的set方法

defineProperty 另一个方法 get方法，js中使用这个变量走get方法， vue模板中使用到了该变量走get方法

数据驱动：数据改变导致页面视图的改变；数据响应式：数据改变导致页面视图的改变；观察者模式【vue设计思想】：通过 defineProperty getter 和setter 实现数据改变和页面视图改变的观察

发布订阅模式【vue设计思想】：比观察者多了事件调度中心【事件的定义事件的触发】事件的定义 :vuejs 中一旦组件被创建，所有的dom 都绑定了事件

事件的触发：用户的操作导致事件触发--- 页面发生改变---改变数据 :页面视图的改变导致数据改变

$set 重新挟持

问题：对象新增属性，数组的索引操作不会渲染页面

原因： defineProperty(对象,属性名,{set(){},get(){}}

this.$set(this.user,'age',20)

第一个值为自己对象的名字
第二个为key 添加的
第三个位
function set(obj,key,val){
   let _data = val;
    object.defineProperty(obj,key,{
        get(){
            return _data;
        },
        set(newVal){
            _data = newVal
            rendert()
        }
    })
}

总结vue的知识和面试

1.SFC单文件组件格式

2.MVVM 原理[响应式-数据驱动-双向绑定] -vue3