监听数组 — 非兼容

最后更新于：2022-04-02 08:14:44

>[success] # 监听数组 ~~~ 1.非兼容: 当侦听一个数组时，只有当数组被替换时才会触发回调。如果你需要在数组改变时触发回调，必须指定 deep 选项。 ~~~ >[danger] ##### vue3.0 ~~~ 1.在 Vue 3.x 当我们监听一个数组时，只有在数组被整体替换时才会触发回调。也就是说，如果我们只对数组进行增删改查操作时，是不会被 Vue 捕捉到的。如果想要在数组在发生改变时被 Vue 识别到，我们必须手动添加 deep 选项。如下 ~~~ ~~~ watch: { bookList: { handler(val, oldVal) { console.log('book list changed') }, deep: true }, } ~~~

v-bind 合并行为非兼容

最后更新于：2022-04-02 08:14:42

[v-bind 合并行为非兼容](https://v3.cn.vuejs.org/guide/migration/v-bind.html#%E6%A6%82%E8%A7%88)

v-if 与 v-for 的优先级对比 — 非兼容

最后更新于：2022-04-02 08:14:39

>[success] # v-if 和v-for ~~~ 1.v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量： ~~~ ~~~html

~~~ * 可以这么修改 ~~~html ~~~ ~~~ 1.上面的写法依旧不是一个很好的做法，建议在使用计算属性，在计算属性中将需要的值进行过滤掉 ~~~ [v-if 与 v-for 的优先级对比非兼容](https://v3.cn.vuejs.org/guide/migration/v-if-v-for.html#%E6%A6%82%E8%A7%88)

Transition Group 根元素 — ??

最后更新于：2022-04-02 08:14:37

过渡的 class 名更改 ???

最后更新于：2022-04-02 08:14:35

Slot 统一 ??

最后更新于：2022-04-02 08:14:32

渲染函数 API — ??

最后更新于：2022-04-02 08:14:30

组件使用 v-model — 非兼容

最后更新于：2022-04-02 08:14:28

>[success] # v-model ~~~ 1.'非兼容'：用于自定义组件时，v-model prop 和事件默认名称已更改： 1.1.'prop'：value -> modelValue； 1.2.'event'：input -> update:modelValue； 2.'非兼容'：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替； 3.'新增'：现在可以在同一个组件上使用多个 v-model 进行双向绑定； 4.'新增'：现在可以自定义 v-model 修饰符。 ~~~ >[info] ## v-model 非组件基础使用 ~~~ 1.'v-model' 指令在表单 '、

及 <select>' 元素上创建双向数据绑定,但 v-model 本质是语法糖
<input v-model="searchText" /> 这种写法等同于
<input :value="searchText" @input="searchText = $event.target.value" />
~~~
>[info] ## Vue2.x
~~~
1.'v-model' 是语法糖，因此在组件上使用也是同样的，在组件父子值传递往往需要在使用的时候定义事件和
props,  '<ChildComponent :value="pageTitle" @input="pageTitle = $event" />' 
可以简写 '<ChildComponent v-model="pageTitle" />'
当然Vue 也提供了属性'model' 可以自定义属性不再限制于'value 和 input'
// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}
但是v-model 最大的问题只能作用一次及不会出现以下情况
 '<ChildComponent v-model="pageTitle"  v-model="pageContent"/>'
这时候出现了'.sync' 修饰符来解决这类问题'<ChildComponent :title.sync="pageTitle" />' 可以绑定多个
目的就是一个语法糖的省略用法，更多的详细案例'https://www.kancloud.cn/cyyspring/vuejs/1108931'
~~~
>[info] ## 3.x
~~~
1.来看'3.x','v-model'在'2.x' 的弊端'v-model' 只能在组件使用一次，并且如果想实现类似效果使用多次需要
'.sync' 来定义使用这个语法糖，本质上'v-model 和sync'在组建上做了类似的语法功能，在'3.x'将'.sync'
移除,为了让组件可以使用多个'v-model' 也从原来'value 和input'变成了'modelValue 和 update:modelValue'
~~~
>[danger] ##### 简版的先消化理解
~~~js
1.在组件使用'<ChildComponent v-model="pageTitle" />' 是下面的简写    
    <custom-input
      :modelValue="searchText"
      @update:modelValue="searchText = $event"
    />
来分析组件props 需要有一个'modelValue' ,组件的事件 $emit 需要有一个'update:modelValue'组件写法
  app.component('custom-input', {
    props: ['modelValue'],
    emits: ['update:modelValue'],
    template: `
        <input
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
        >
    `
})
2.v-model 可以定义多个写法'<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />'
是一下的简写
    <ChildComponent
      :title="pageTitle"
      @update:title="pageTitle = $event"
      :content="pageContent"
      @update:content="pageContent = $event"
    />
就是说明你的 props 定义['title','content']，对应的$emits定义['update:title'.'update:content'],事件绑定触发$emits
就看项目需要可以是'input、change、input'
~~~
>[danger] ##### 使用

~~~
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

<body>
        
        <div id="app">
            {{searchText}}
            <custom-input v-model="searchText"></custom-input>
        </div>
        <script src="https://unpkg.com/vue@next"></script>
        <script>
         const {createApp} = Vue
         const app = createApp({
             data(){
                 return {
                     searchText:'11'
                 }
             },
             methods:{
                 fontSize(){
                     console.log("1")
                 }
             },
         })
         app.component('custom-input', {
                props: ['modelValue'],
                emits: ['update:modelValue'],
                template: `
                    <input
                    :value="modelValue"
                    @input="$emit('update:modelValue', $event.target.value)"
                    >
                `
            })
         app.mount('#app')
        </script>
    </body>

</html>
~~~
>[danger] ##### 上面的案例官方给的另一种思路
~~~
1.使用计算属性利用get 方法应返回 modelValue property，或用于绑定的任何 property，
set 方法应为该 property 触发相应的 $emit。
~~~
~~~
app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input v-model="value">
  `,
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) { 
        this.$emit('update:modelValue', value)
      }
    }
  }
})
~~~
>[info] ## 官方给的迁移策略

我们推荐：

*   检查你的代码库中所有使用`.sync`的部分并将其替换为`v-model`：
    
    ~~~
    <ChildComponent :title.sync="pageTitle" />
    
    
    
    <ChildComponent v-model:title="pageTitle" />
    
    ~~~

*   对于所有不带参数的`v-model`，请确保分别将 prop 和 event 命名更改为`modelValue`和`update:modelValue`
    
    ~~~
    <ChildComponent v-model="pageTitle" />
    
    ~~~
    ~~~
    // ChildComponent.vue
    
    export default {
      props: {
        modelValue: String // 以前是`value：String`
      },
      emits: ['update:modelValue'],
      methods: {
        changePageTitle(title) {
          this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
        }
      }
    }
    ~~~
                    </div>
                            <script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/marked.min.js"></script>
                            <script>content=document.getElementById("md-view").innerHTML;</script>';
                            <script>document.getElementById("md-view").innerHTML = marked.parse(content)</script>
                                            </section>
                  
                    <section class="normal markdown-section">
                        <h1 id="在 prop 的默认函数中访问 this — ??">在 prop 的默认函数中访问 this — ??<a class="anchorjs-link " href="#在 prop 的默认函数中访问 this — ??" data-anchorjs-icon=""></a></h1>
                        <p><span class="sa-last-update-time">最后更新于：2022-04-02 08:14:25</span></p>
                                                    <div id="md-view">
                            
                    </div>
                            <script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/marked.min.js"></script>
                            <script>content=document.getElementById("md-view").innerHTML;</script>';
                            <script>document.getElementById("md-view").innerHTML = marked.parse(content)</script>
                                            </section>
                  
                    <section class="normal markdown-section">
                        <h1 id="移除 $listeners 和 v-on.native — 非兼容">移除 $listeners 和 v-on.native — 非兼容<a class="anchorjs-link " href="#移除 $listeners 和 v-on.native — 非兼容" data-anchorjs-icon=""></a></h1>
                        <p><span class="sa-last-update-time">最后更新于：2022-04-02 08:14:23</span></p>
                                                    <div id="md-view">
                            >[success] # 移除$listeners -- 非兼容
~~~
1.$listeners 对象在 Vue 3 中已被移除。现在事件监听器是 $attrs 的一部分
~~~
>[info] ## vue2.x 使用
~~~
1.'$listeners' 和'$attrs' 出发点的解决思路是一样的，前者是针对事件，后者是针对属性
~~~
>[danger] ##### 案例说明
~~~
1.如果在父组件调用子组件的过程中事件配合'.native' 修饰符相当于给子组件加了一个事件，这样的好处
如果子组件内没有事件暴露出，但我们仅仅只是想通过操作子组件触发父组件的一些事，在通俗的理解
将子组件看做了一个普通dom 并且绑定了一个事件
2.先了解'v-on' 他是支持' v-on="{ mouseover: doTish, mouseout: doThat }"' 这种对象形式的使用
~~~
>[danger] ##### 上面第一条的案例解释
~~~
1.下面案例如果事件没有使用'native'修饰符点击事件是不生效的，可以这么理解没有加是认为你在子组件
通过'$emit'将子组click事件暴露出来，加了理解成整体认为是一个dom元素仅仅是一个元素的click事件
2.子组件是由 'div' 嵌套 'button' 那通过'native'修饰的子组件被处罚事件属于div 还是属于button，这取决于
用户点击的位置，如果用户点击的位置是div 那么就是div触发的click事件 相反就是button触发
~~~
* 父组件
~~~
<template>
  <div>
    <my-button @click.native="onUseListener"></my-button>
    
    
  </div>
</template>

~~~
* 子组件
~~~
<template>
  <div>
    <button>ss</button>

</div>
</template>
<script>
export default {
  name: 'button'
}
</script>
~~~
>[danger] ##### $listeners 使用
~~~
1.下面课看出通过$listeners 在子组件在进行简写
~~~
~~~
<template>
  <div>
    <my-button @click="onUseListener" @mouseover='parentTest'></my-button>
  </div>
</template>

~~~
* 没有使用
~~~
<template>
  <div>
    <button @click='childrenClick' @mouseover='childrenTest'>ss</button>
  </div>
</template>
<script>
export default {
  name: 'button',
  mounted() {
    console.log(this.$listeners)
  },
  methods: {
    childrenClick() {
      this.$emit('click')
    },
    childrenTest() {
      this.$emit('mouseover')
    }
  }
}
</script>
~~~
* 使用
~~~
<template>
  <div>
    <button v-on='$listeners'>ss</button>
  </div>
</template>
<script>
export default {
  name: 'button',
  mounted() {
    console.log(this.$listeners) //  {click: ƒ, mouseover: ƒ}
  },

methods: {
    click() {
      this.$emit('click')
    },
    test() {
      this.$emit('test')
    }
  }
}
</script>
~~~
>[danger] ##### 更多具体的参考这个
[跨层级](https://www.cnblogs.com/badaozongcai/articles/12791262.html)
[利用计算属性合并](https://www.jumtu.com/article/116843.html)
>[info] ## vue3.0 ？？ 有点蒙蔽后续看
~~~
1.在 Vue 3 的虚拟 DOM 中，事件监听器现在只是以 on 为前缀的 attribute，这样就成了 $attrs 对象的一部分，
因此 $listeners 被移除了。
~~~
>[danger] ##### 案例 
~~~
1.如果是事件，在'$attrs' 对应的key 要加on 例如下面案例在'$attrs' 为
{
    onMouseover:fn...,
    onClick:fn...,
}
~~~
~~~
<template>
  <div>
    <my-button @click="onUseListener" @mouseover='parentTest'></my-button>
  </div>
</template>

<main v-bind="$attrs">...</main>
<footer>...</footer>
~~~
* 你也可以这么做
~~~html
<div id="app">
  <my-component class="baz"></my-component>
</div>
~~~
~~~
const app = Vue.createApp({})

app.component('my-component', {
  template: `
    <p :class="$attrs.class">Hi!</p>
    <span>This is a child component</span>
  `
})
~~~
                    </div>
                            <script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/marked.min.js"></script>
                            <script>content=document.getElementById("md-view").innerHTML;</script>';
                            <script>document.getElementById("md-view").innerHTML = marked.parse(content)</script>
                                            </section>
                  
                    <section class="normal markdown-section">
                        <h1 id="过滤器 — 移除">过滤器 — 移除<a class="anchorjs-link " href="#过滤器 — 移除" data-anchorjs-icon=""></a></h1>
                        <p><span class="sa-last-update-time">最后更新于：2022-04-02 08:14:05</span></p>
                                                    <div id="md-view">
                            >[success] # 过滤器
~~~
1.从 Vue 3.0 开始，过滤器已删除，不再支持。
~~~
>[info] ## 官方给的建议
~~~
1.建议用计算属性或方法代替过滤器，而不是使用过滤器。

~~~
>[info] ## vue2.x =》 vue3.x 全局过滤属性官方也给了对应建议
~~~
1.如果在应用中全局注册了过滤器（vue2.x 项目想到3.x），那么在每个组件中用计算属性或方法调用来替
换它可能就没那么方便了。你可以通过全局属性在所有组件中使用
~~~
 >[danger] ##### 案例
* 定义一个全局的'$filters' 对象
~~~
// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}
~~~
* 通过 $filters 对象修改所有的模板
~~~
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>
~~~
                    </div>
                            <script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/marked.min.js"></script>
                            <script>content=document.getElementById("md-view").innerHTML;</script>';
                            <script>document.getElementById("md-view").innerHTML = marked.parse(content)</script>
                                            </section>
                  
                    <section class="normal markdown-section">
                        <h1 id="事件 API — 非兼容">事件 API — 非兼容<a class="anchorjs-link " href="#事件 API — 非兼容" data-anchorjs-icon=""></a></h1>
                        <p><span class="sa-last-update-time">最后更新于：2022-04-02 08:14:02</span></p>
                                                    <div id="md-view">
                            >[success] # 事件api
~~~
1.$on，$off 和 $once 实例方法已被移除，应用实例不再实现事件触发接口。
~~~
>[info] ## 官方给出的相应替代方案
可以使用实现了事件触发接口的外部库来替换现有的 event hub，例如[mitt](https://github.com/developit/mitt)或[tiny-emitter](https://github.com/scottcorgan/tiny-emitter)。兼容性构建中也支持这些方法。
                    </div>
                            <script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/marked.min.js"></script>
                            <script>content=document.getElementById("md-view").innerHTML;</script>';
                            <script>document.getElementById("md-view").innerHTML = marked.parse(content)</script>
                                            </section>
                  
                    <section class="normal markdown-section">
                        <h1 id="emits Option — 新增">emits Option — 新增<a class="anchorjs-link " href="#emits Option — 新增" data-anchorjs-icon=""></a></h1>
                        <p><span class="sa-last-update-time">最后更新于：2022-04-02 08:14:00</span></p>
                                                    <div id="md-view">
                            >[success] # emits Option
~~~
1.emits 触发当前实例上的事件。附加参数都会传给监听器回调，最常见的用处子传父
2.'Vue 3'现在提供了一个emits选项，类似于现有props选项。此选项可用于定义组件可以向其父对象发出的事件,
这种使用是新增方法，之前的写法依然可以在vue3.x中使用
~~~
>[info] ## vue2.x 和 3.x 都通用的写法
* 子组件
~~~
<button @click="$emit('accepted',{
        email: 'foo@bar.com', password: 123 })">ss</button>
~~~
* 父组件
~~~
<template>
  <div>
    <my-button ref='mybutton' @accepted='accepted'></my-button>
  </div>
</template>

~~~
* 子组件
~~~
<template>
  <button @click="$emit('click',{
        email: 'foo@bar.com',
        password: 123 // Type error!
      })">ss</button>
</template>
<script>
export default {
  // emits: ['click']
  // emits: {
  //   accepted: (test) => {
  //     console.log(test)
  //     return true
  //   }
  // }
}
</script>
~~~
* 父组件
~~~
<template>
  <div>
    <my-button ref='mybutton' @click='accepted'></my-button>
  </div>
</template>

~~~
                    </div>
                            <script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/marked.min.js"></script>
                            <script>content=document.getElementById("md-view").innerHTML;</script>';
                            <script>document.getElementById("md-view").innerHTML = marked.parse(content)</script>
                                            </section>
                            </div>
        </div>
        <div class="banquan">
                    </div> 
    </div>
    <a href="" rel="nofollow" class="navigation navigation-prev" id="shangyige">
        <i class="fa fa-angle-left"></i>
    </a>
    <a href="" rel="nofollow" class="navigation navigation-next" id="xiayige">
        <i class="fa fa-angle-right"></i>
    </a>
</div>
</div>
<script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/js.js"></script>
<script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/ciambook.js"></script>
<script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/theme.js"></script>
<script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/bootstrap.js"></script>
<script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/fontsettings.js"></script>
</body>
</html>