vue2.0和1.0的区别

Dear 丶 2023-08-17 17:05 124阅读 0赞

**1.关于过滤器**  
2.0移除了自带过滤器，但是保留了自定义过滤器的功能。以后想用过滤器可以自己定义  
定义方法还是跟1.0相同 :vue.filter(‘过滤器名字’，fn)  
调用方法有些许差别：之前调用:\{ \{msg | filterName’12’ ‘5’\}\} 现在调用:\{ \{msg | filterName(‘12’,‘5’)\}\}；

**2.关于循环中重复数据的问题**  
1.0中用到的是 track-by="$(index)";  
2.0中用到的是 ：key=“xxx.id” xxx.id可以是任何代表唯一性的值

**3.生命周期**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lX25ldmVy_size_16_color_FFFFFF_t_70]

1.0生命周期 解释  
init 组件刚刚被创建，但Data、method等属性还没被计算出来  
created 组件创建已经完成，但DOM还没被生成出来  
beforeCompile 模板编译之前  
compiled 模板编译之后  
ready 组件准备（平时用得较多）  
attached 在 vm. e l 插 入 到 D O M 时 调 用 d e t a c h e d 在 v m . el 插入到DOM时调用 detached 在 vm. el插入到DOM时调用detached在vm.el 从 DOM 中删除时调用  
beforeDestory 组件销毁之前  
destoryed 组件销毁之后

2.0的生命周期  
周期 解释  
beforeCreate 组件刚刚被创建，但Data、method等属性还没被计算出来  
created 组件创建已经完成，但DOM还没被生成出来  
beforeMount 模板编译之前  
mounted 模板编译之后,组件准备  
beforeUpdate 组件更新之前（数据等变动的时候）  
updated 组件更新之后（数据等变动的时候）  
activated for keep-alive, 组件被激活时调用  
deactivated for keep-alive, 组件被移除时调用  
beforeDestory 组件销毁之前  
destoryed 组件销毁之后

**4.片段代码**  
编写template的时候，2.0必须要用一个根元素（如div）将代码片段包裹起来，否则报错。

1.0
        <template>
            <h3>我是组件</h3><strong>我是加粗标签</strong>
        </template>
    2.0
        <template id="aaa">
                <div>
                    <h3>我是组件</h3>
                    <strong>我是加粗标签</strong>
                </div>
        </template>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lX25ldmVy_size_16_color_FFFFFF_t_70]: /images/20230808/2060abe7398b42498f8f912e65b6dc46.png