12.29

最新推荐文章于 2024-09-04 19:23:53 发布

m0_63713211

最新推荐文章于 2024-09-04 19:23:53 发布

阅读量413

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_63713211/article/details/128489268

版权

复习vue重点

数据代理原理解析(简单的例子)

<script>
    //数据代理原理
    let obj={x:90}
    let obj2={y:0}
    Object.defineProperty(obj2,'x',{
        get(){
         return obj.x
        },
        set(value){
            obj.x=value
        }
    })


</script>

key的原理

<!-- 
  虚拟DOM算法
  旧虚拟DOM与新虚拟DOM对比 找到相同的key 
 用index作为key：对数据进行：逆序添加 删除等破坏顺序操作：会产生没有必要的DOM更新 效果没问题 效率低
                 如果有输入性DOM则会产生错误 界面有问题
                 建议使用唯一标识作为key 学号 id 等
 -->
<body>
    <div class="root1">
     <ul>
        <li v-for="(p,index) in persons" :key="p.id">{{p.name}}
            <input type="text">
        </li>
        <button @click="add">点我向前添加一个成员信息</button>

     </ul>
     
    </div>

</body>
<script>new Vue({
  el:'.root1',
  data:{
    persons:[
        { id:'001',name:'张三'},
        { id:'002',name:'李四'},
        { id:'003',name:'王五'}
    ]
  },
  methods:{
    add(){
        const p ={id:'004',name:'老刘'}
        this.persons.unshift(p)//往前加 push在后加
    }
  }
})
</script>

监测数据改变原理

1.传入data

2.加工data

3.vm._data=data

属性值一变调用seter 重新解析模板生成新的虚拟DOM 进行算法对比更新页面

1.vue会监视data中所有层次的数据

2.如何监测对象中的数据：

通过setter实现并且要在new vue时就传入监测数据

(1)后追加的属性 vue不做响应式的处理

(2)如需要响应式使用以下API:

Vue.set(target propertyName value) 或者 vm.$set()

3.监测数组中的数据

(1)调用原生对应的数组的方法

(2)重新解析模板更新页面

4.修改数组元素方法

除了一些特定的API 还可以使用vue.set()

5.vue.set不能给vm和vm的根数据对象vm._data添加属性

组件注意点(以school为例)

1.school组件本身是一个VueComponent的构造函数是Vue.extend生成的

2.写 <school/>标签会解析创建school组件的实例对象

3.每次调用Vue.extend 返回的是全新的VueComponent

4.组件配置中 this指向是VueComponent实例对象(简称vc) new vue指向是vue实例对象(简称vm)

生命周期

beforeCreat:无法访问data数据和methods方法

初始化：数据代理数据监测

created:可以访问data methods

vue开始解析生成虚拟dom(内存中) 页面不显示解析好的内容

beforeMount:页面是未经vue解析的

将内存中的DOM转为真实的

mounted:页面是vue编译好的DOM

beforeUpdate:数据是新的页面是旧的数据页面不同步

beforeDestroy:清除定时器解绑自定义事件原生DOM还可以操作可以访问数据调用方法

但是对数据的修改不会触发更新

通过复习看之前的视频，发现还是有新的收获，对之前忽略的问题有了新的认识和理解，不仅是一边复习，还是一次学习新知识理解更深刻的机会，将一些重点的知识和案例再进行消化。