VUE基础知识

最新推荐文章于 2023-02-06 09:00:06 发布

原创最新推荐文章于 2023-02-06 09:00:06 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

随身小笔记专栏收录该内容

7 篇文章

订阅专栏

VUE双向绑定原理

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。

VUE router钩子函数

全局钩子

beforeEach函数有三个参数：
1.to:router即将进入的路由对象
2.from:当前导航即将离开的路由
3.next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
afterEach：router.beforeEach 是页面加载之前，相反router.afterEach是页面加载之后

组件内的守卫

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

router模式

hash模式对于后台来讲就是一个url，因为地址中的hash值是不会传到后台的，所以服务器端做一个根地址的映射就可以了。
history模式最终的路由都体现在url的pathname中，这部分是会传到服务器端的，因此需要服务端对每一个可能的path值都作相应的映射。或者采用模糊匹配的方式进行映射

router跳转几种方式

1、声明式： 
  1) 根据路由路径（/home/sort/detail）跳转 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看子页面</router-link>
  2) 根据路由名称（detail）跳转 <router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查看子页面</router-link>:to=""  可以实现绑定动态的 路由 和 参数

2、编程式： 
  1） this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})
  2） this.$router.push({name: 'detail',params:{id: 'abc'}})
 
  备注： params 和 query 传参的区别：
  1、params传参时  参数不会出现在url的路径上面， 但是刷新页面时param里面的数据会消失 （获取方式this.$route.params.xxx）
  2、query传参时   参数出现在url的路径上面， 刷新页面时query里面的数据不变（获取方式this.$route.query.xxx）
            
转至：https://blog.youkuaiyun.com/m0_37273490/article/details/86476206

VUE组件传值

父组件传子组件

子组件通过props来接收数据

子组件传父组件

子组件使用this.$emit(“fun”,参数),父组件接收fun方法拿到参数

兄弟组件传值

创建一个Vue的实例，让各个兄弟共用同一个事件机制。
传递数据方，通过一个事件触发bus. $emit(方法名，传递的数据)。接收数据方，通过mounted(){}触发bus.$ on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})
参考：https://www.cnblogs.com/xiaotanke/p/7427636.html

vue组件keep-alive
是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。它提供了include与exclude两个属性，允许组件有条件地进行缓存。

prop:
1.include: 字符串或正则表达式。只有匹配的组件会被缓存。
2.exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

Computed和watch的区别

Computed: -->计算属性

1支持缓存，只有依赖数据发生改变，才会重新进行计算

2）不支持异步

3）如果一个属性是由其他属性计算而来，这个属性依赖其他属性，多对一（多个值影响一个值）的情况一般用computed；

Watch: -->监听属性

监听属性；一定是存在的属性；是data中的属性；

1）不支持缓存，数据变化，直接会触发相应的操作

2）支持异步

3）当一个属性发生变化时，需要执行对应的操作；一对多（一个值影响多个值）的情况一般用watch；

prop 验证

作为对象属性的参数可以写为对象形式，参数对象含有4个属性，type、required、default、validator。
type：设定参数类型，当传入参数类型与type不相符时，控制台会报错
required：设定参数是否是必传，当设为true时，不传该参数会报错
default：设定默认值，当参数类型为复杂类型时，需使用工厂模式生成默认值，否则Vue会在控制台抛出警告。
validator：校验器，是一个函数，拥有一个代表传入值的形参，可以自定义各种校验，当返回false时，会报错，表示没通过校验。

<test-prop-validate :prop-a="1" :prop-b="2" :prop-c="'3'" :prop-f="'success'"></test-prop-validate>
Vue.component('test-prop-validate', {
    props: {
        // 基础的类型检查 (`null` 匹配任何类型)
        propA: Number,
        // 多个可能的类型
        propB: [String, Number],
        // 必填的字符串
        propC: {
            type: String,
            required: true
        },
        // 带有默认值的数字
        propD: {
            type: Number,
            default: 100
        },
        // 带有默认值的对象
        propE: {
            type: Object,
            // 对象或数组默认值必须从一个工厂函数获取
            default: function () {
                return { message: 'hello' }
            }
        },
        // 自定义验证函数
        propF: {
            validator: function (value) {
                // 这个值必须匹配下列字符串中的一个
                return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
    },
    data() {
        return {

        }
    },
    template: `
        <div>
            {{propD}}{{propE}}
        </div>
        `
})