vue重点

本文详细介绍了Vue.js的生命周期,包括created、mounted、updated和destroyed等关键阶段,指出异步请求的最佳时机。同时,阐述了父子组件间的通信方式,如props、$emit、vuex,并对比了method、watch和computed的使用场景和区别。强调了组件的data必须为函数以确保数据独立,以及插槽(slot)和组件模板根元素的重要性。
摘要由CSDN通过智能技术生成

1、生命周期

created vue实例创建,data 数据的初始化,属性方法运算,事件回调
motunted 挂载完成,模板中的HTML渲染到HTML页面中
updated 跟新数据并渲染htmlDOM树
destroyed 销毁实例,事件,回调函数机制移除
异步请求在哪一步发起?
可以在钩子函数 created、beforeMount、mounted 中进行异步请求,因为在这三个钩子函数中,data已经创建,可以将服务器端返回的数据进行赋值。

2、父子之间的通信

props和$emit
1、父组件通过 props 向下传递数据给子组件。注:组件中的数据共有三种形式:data、props、computed
2、子组件向父组件传值(通过事件形式)
注意:1.父组件A向子组件B通过props
2.子组件B向父组件A,通过B组件中的emit,A组件的v-on来事项。
emit/on
vuex

3、方法method、侦听属性watch、计算方法computed

1、计算属性computed:可以缓存数据,只在依赖的数据改变时才重新求值,只要依赖的数据没有发生改变,便会立即返回缓存的计算结果,不必再次执行
侦听watch:一些数据随着其他数据变动而变动,主要执行异步操作或开销较大时使用
2、computed和method的区别
computed是属性调用,而method是函数调用
3、computed和watch的区别
1.computed和watch都是观察页面的数据变化的。
2.computed只有当页面数据变化时才会计算,当数据没有变化的时候,他会读取缓存。而watch每次都需要执行函数,methods也是每次都需要执行
3.数据变化时执行异步或者开销比较大的操作的时候,这时候使用watch是合适的

总结:
computed有缓存,只有依赖的数据有变化时才会求值,当依赖的数据没有变化是是不会求值的,
watch每次都会求值,主要当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。method也是每次都会求值

4、一个组件的data必须是一个函数

每个实例可以维护一份被返回对象的的独立拷贝
如果没有这个规则的话,当按下一个按钮的时候,其他按钮是会受到他的影响的。

5、插槽

1、slot最为插槽分发内容的出口
2、prop可以定义组件标签上的自定义attribute,attribute的值就变成了组件实例的一个property。

6、组件模板只能有一个根元素
根元素描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值