Vue中钩子函数inserted和bind的区别

2020-05-22 本文已影响0人 Jure_joe

1、参考Vue官网

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)
2、个人见解（关于el.fous()只在inserted()函数中生效，在bind函数中不生效的问题）

bind ：指令第一次绑定到元素上时调用
inserted：表示元素在插入到DOM中的时候，会执行inserted函数，只执行一次
update ：VNode更新的时候调用，可能会调用多次
造成的原因 ：页面上的任何一个元素想要显示，首先需要浏览器的渲染引擎将元素加载到内存中形成DOM树，也就是说执行bind函数的时候，元素还没有插入到内存中去，因为，一个元素只有插入DOM之后，才会获得焦点。所以说，在bind函数中执行el.focus()焦点事件的时机是不对的；同理可得，凡是与js样式有关的需在bind函数中执行（如：el.style.color = 'blue'），而与js行为有关的，需在inserted函数中执行

3、测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            姓名：<input placeholder="请输入姓名" v-color="'blue'"/><!-- 区别于变量，如果不使用单引号的话，就认为是一个变量，回去data中找这个变量的值 -->
            性别：<input type="text" placeholder="请输入性别" v-focus>
        </div>
        <script>
            //全局中的自定义指令
            Vue.directive('color',{
                bind:function(el,binding) {
                    console.log(binding.name);
        <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            姓名：<input placeholder="请输入姓名" v-color="'blue'" v-fontweight="900"/><!-- 区别于变量，如果不使用单引号的话，就认为是一个变量，回去data中找这个变量的值 -->
            性别：<input type="text" placeholder="请输入性别" v-focus>
        </div>
        <script>
            //全局中的自定义指令
            Vue.directive('color',{
                bind:function(el,binding) {
                    console.log(binding.name);
                    console.log(binding.value);//输出的是blue的值
                    console.log(binding.expression)//输出的是'blue'的表达式
                    el.style.color = binding.value;
                    /* el.focus()方法不会触发 */
                    el.focus(); 
                }
            });
            Vue.directive('focus',{
                inserted:function(el){
                    el.focus();
                }
            })
            const vm = new Vue({
                el:'#app',
                data:{
                    blue:'red'
                },
                methods:{
                    
                },
                directives:{
                    'fontweight':{
                        bind:function(el,binding) {
                            el.style.fontWeight = binding.value
                        }
                    }
                }
            })
            
        </script>
    </body>
</html>

4、图片

image.png

Vue中钩子函数inserted和bind的区别

猜你喜欢

热点阅读